Question

我正在努力使用datetimepicker和数据格式。我的日期时间以以下格式存储：“yyyy-mm-ddTHH:MM:ss.000”。

如果我没有格式化，我的日期datetimepicker会误印。如果我做格式化它，我的bindingHandlers会收到错误：

[错误] TypeError：09.04.2016 19:24:48不是函数（评估'observable（$（element）.val（））'）

我觉得我在这里遇到了一些僵局，但肯定有办法解决它吗？

HTML：

<input  type="text" data-bind="datetimepicker:viewWhenDateTime,datetimepickerOptions:{dateFormat:'dd.mm.yy',timeFormat:'HH:mm:ss',addSliderAccess:true,sliderAccessArgs:{touchonly:false}}" />

JavaScript的：

function ViewModel() {
   var self = this;
   self.whenDateTime = ko.observable("2016-04-09T19:24:48.000");
   self.viewWhenDateTime = self.whenDateTime().parseDate();
}

BindingHandlers：

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

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

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

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).val();
        if (value - current !== 0) {
            $(element).datetimepicker("setDate", value);
        }
    }
};

在这里小提琴：http://jsfiddle.net/AsleG/nrsathdg/

Answer 1

你的绑定处理程序是双向的：它会尝试更新传递给它的东西，就像它是一个可观察的东西一样。然而，您绑定的viewWhenDateTime 不可观察。

鉴于此

viewWhenDateTime依赖于另一个可观察者;和
viewWhenDateTime将使用双向绑定处理程序绑定

你可能需要一个可写的可观察对象。

这些方面的东西：

function ViewModel() {
   var self = this;
   self.whenDateTime = ko.observable("2016-04-09T19:24:48.000");
   self.viewWhenDateTime = ko.computed({
     read: function() { return self.whenDateTime().parseDate(); },
     write: function(newVal) {
       // Do the inverse of `parseDate` here
       // and set it to self.whenDateTime(....)
     }
   });
}

如何使用DateTimePicker和knockout-observable处理日期格式？

1 个答案: