1

次のようなビューモデルがあります。

var ViewModel = function() {
    var self = this;

    self.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
    self.minuteOptions = [0, 15, 30, 45];

    self.formatTimeOption = function(hour) {
        if (hour < 10) return "0" + hour;
            return hour.toString();
    };

    self.startDate = ko.observable(null);

    self.startDateHour = ko.computed({
        read: function() {
            return new Date(self.startDate()).getHours();
        },
        write: function(value) {
            var newDate = new Date(self.startDate());
            newDate.setHours(value);
            self.startDate(newDate);
        }
    });

    self.startDateMinute = ko.computed({
        read: function() {
            return new Date(self.startDate()).getMinutes();
        },
        write: function(value) {
            var newDate = new Date(self.startDate());
            newDate.setMinutes(value);
            self.startDate(newDate);
        }
    });
};

ご覧のとおり、更新時にstartDateの時間/分を更新する書き込み可能な計算されたオブザーバブルがあります。
これは機能していますが、機能している場合、datepicker入力フィールドには（たとえば）ではなく、長い形式の日付が表示されます。

2013年1月3日

このJSFiddleはここから入手できます：http：//jsfiddle.net/alexjamesbrown/2kSpL/9/

4

1 に答える 1

1

この回答から取得したように、次のカスタムバインディングハンドラーを追加することでこれを解決しました

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);
        }
    }
};

動作するJSFiddleは次のとおりです。http：
//jsfiddle.net/alexjamesbrown/v6hdS/

于 2013-01-04T11:35:34.297 に答える