2

条件ステートメントで日付ピッカーを表示する必要があるアプリケーションがあります。デュランダルとノックアウトでホットタオルを使用しています。以下に示すように、条件文の親はノックアウトでバインドされます。

<section data-bind="foreach: resourceProperty">


    <span data-bind="text: associatedStandardResourceProperty().name " style="width:150px;float:left;"></span>

    <!-- ko if: associatedStandardResourceProperty().isDateTime   -->
                <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                    <span class="add-on"><i class="icon-th"></i></span>
                </div>

    <!-- /ko -->

また、以下に示すように、viewAttached イベントでビュー モデルのバインディングを開始しました。

function viewAttached(view) {
    $(view).find('#dummyDiv').datepicker();
    $(view).find('#dp3').datepicker();


    return true;
}

ここで dummyDiv は、日付ピッカーがノックアウトステートメントなしで適切に機能しているかどうかを確認するために使用している一時的な div であり、それは ko foreach の外にあります。確認したところ、foreach の外部にあるダミーの日付ピッカーを適切にバインドできます。

上記のように、if 条件ごとにノックアウト内で日付ピッカーを使用するときに、日付ピッカーを実装/有効にする方法を知りたいです。

ありがとう。

4

2 に答える 2

1

次のように div にクラスを追加してみませんか。

<div class="input-append date" class="custom-dp" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                    <input class="span2" size="16" type="text" value="12-02-2012" class="datepicker">
                    <span class="add-on"><i class="icon-th"></i></span>
</div>

次に、viewAttached 関数で次のように呼び出します。

$('.custom-dp').datepicker();
于 2013-06-14T13:27:47.613 に答える
1

私はこれを私の形で持っています

<tbody data-bind='foreach: viewModel.contents'>
                <tr>
                    <td>
                        <input type="text" class='span2 datepicker' data-bind='value: parseJsonDateString(scec_dt_sop)' />
                    </td>
                    <td>
                        <input type="text" class='number span2' data-bind='value: scec_life_time, uniqueName: true' />
                    </td>
                </tr>
            </tbody>

私は私のjavascriptにこれを持っています

 var parseJsonDateString = function (date_string) {
            if (date_string) {
                var value = new Date(parseInt(date_string.replace(/(^.*\()|([+-].*$)/g, '')));
                var date =  value.getDate() + "-" + (value.getMonth() +1) +"-" + value.getFullYear();
                return date;  
            }
            return "";
        };

        var initialData = @if (Model != null && Model.ScenarioContentGrid != null)
                          {
                              @Html.Raw(new JavaScriptSerializer().Serialize(Model.ScenarioContentGrid))
                          };

        var viewModel = {
            contents: ko.observableArray(initialData),
            showCalendar: function() {
                $('.datepicker').datepicker({
                    autoclose: true,
                    format: 'dd-mm-yyyy'}); 
            },


        };

        $(document).ready(function() {
            $(function () {
                $('.datepicker').datepicker({
                    autoclose: true,
                    format: 'dd-mm-yyyy'});
            });

            ko.applyBindings(viewModel);

          });

ページがロードされた後にポップアップカレンダーを表示する可能性を提供するために、関数 showCalendar() を作成しました。次に、ボタンクリックなどのいくつかのコントロールのイベントで呼び出すことができます。別の日付ピッカーを作成し、これを呼び出します。ポップアップカレンダーを表示する関数。

注意: bootstrap-datepicker コンポーネント (javascript および css) を含めることを忘れないでください。

于 2013-07-18T21:53:47.067 に答える