javascript - Jquery ui datetimepicker 不适用于 knockout

标签 javascript jquery-ui knockout.js

我正在引用 jQuery UI datepicker change event not caught by KnockoutJS制作datetimepicker与 knockout 一起工作。所以我基本上用 datetimepicker 替换了 datepicker 来制作以下代码

ko.bindingHandlers.datetimepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {   
        //initialize datetimepicker 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).datetimepicker("getDate"));
        });

        //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());

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

        current = $(element).datetimepicker("getDate");

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

在 html 中:

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

使用代码,它看起来可以工作,但无法将用户更改的内容更新为相应的 knockout 可观察对象。

我调试了代码发现

  1. datetimepicker("getDate") 仅给出时间为 00:00 的日期部分。
  2. observable($(element).datetimepicker("getDate")); 时不时抛出异常,因为 observable(x) 有时不存在。

有人解决了这个问题吗?

更新:#2 已通过捕获偶尔的异常解决。

最佳答案

您可能想尝试使用最新版本的 jQuery UI。在我将 fiddle 更新为更新的 jQuery/jQuery UI 之前,我看到了与您相同的行为。

这是一个包含最新位的 fiddle :http://jsfiddle.net/rniemeyer/MWHNg

关于javascript - Jquery ui datetimepicker 不适用于 knockout ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12206590/

相关文章:

javascript - Appcelerator titan - 传递js变量

javascript - 如何通过多次单击按钮来解决 React.js 状态?

jquery - 将 jQuery 自动完成项呈现为内联 block

javascript - 对knockout.js json数据执行jquery

javascript - 循环遍历 div 数组以确定每个元素是否都有子元素

javascript - 如何搜索产品 'item type' 的数组并将其发送到名称为 'Item Type' 的工作表?

JQuery 选项卡 - 更改输入条目选项卡的背景颜色

java - 在网页上显示项目结构和内容,如 Eclipse 的包资源管理器

knockout.js - 按项目对列表进行排序,按字母顺序排列

css - IE7 + css类继承