0

ノックアウトで作成したページがあり、ブートストラップ日付ピッカーのイベント ハンドラーが見つからないようです。 eyeconなどの利用可能な一般的なツールをいくつか調べましたが、適切なものが見つからないようですDate 値を ViewModel にデータ バインドするイベント ハンドラ。ただし、jQueryUi で動作するものを見つけました。

ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};
            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            });

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };

しかし、ブートストラップにはありません。Viewmodel で作成した WebForm のこのFiddleを作成しました。どんなアドバイスでも大歓迎です。

4

1 に答える 1

1

これは、 bootstrap-datepicker.jsを使用した、動作する (最小限の) バージョンです。それはあなたに出発点を与えるはずです：

  ko.bindingHandlers.datepicker = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                //initialize datepicker with some optional options
                var options = allBindingsAccessor().datepickerOptions || {};
                $(element).datepicker(options).on("changeDate", function (ev) {
                    var observable = valueAccessor();
                    observable(ev.date);
                });
            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                $(element).datepicker("setValue", value);
            }
        };

http://jsfiddle.net/jearles/HLVfA/6/

于 2013-01-19T18:01:53.800 に答える