1. ホーム
  2. jquery-ui

[解決済み] jQuery UI datepickerの変更イベントがKnockoutJSに捕捉されない。

2022-06-20 17:47:31

質問

KnockoutJSをjQuery UIで使用しようとしています。私はdatepickerが付属しているinput要素を持っています。私は現在、実行されている knockout.debug.1.2.1.js を実行していますが、changeイベントがKnockoutに捕捉されないようです。要素は以下のような感じです。

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

を変更してみたりもしたのですが valueUpdate イベントの種類を変更してみましたが、効果はありませんでした。どうやらChromeでは focus イベントを発生させるようですが、IE では発生しません。

Knockoutのメソッドで、すべてのバインディングを再バインドするものはありますか?私は、技術的には、サーバーに送信する前に値を変更する必要があるだけです。だから、私はそのような回避策に耐えることができます。

問題はdatepickerのせいだと思うのですが、これを修正する方法を見つけることができません。

何かアイデアはありますか?

どのように解決するのですか?

jQuery UI の datepicker では、datepicker が提供する API を使用して Date オブジェクトで読み取り/書き込みを行うカスタムバインディングを使用することが望ましいと思います。

バインディングは次のようになります(私の回答から ここで ):

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

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "changeDate", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

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

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

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

のように使うのでしょう。

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

jsFiddleのサンプルはこちらです。 http://jsfiddle.net/rniemeyer/NAgNV/