在 ASP.Net 中使用 Knockoutjs、momentjs 的 Jquery UI 日期选择器答案

【问题标题】：Jquery UI datepicker using Knockoutjs, momentjs in ASP.Net在 ASP.Net 中使用 Knockoutjs、momentjs 的 Jquery UI 日期选择器
【发布时间】：2013-12-17 16:53:33
【问题描述】：

我正在使用 Niemeyer 的自定义绑定。使用日期选择器选择日期时出现问题。它显示当前日期而不是输入标签中设置的日期。

虽然我不确定这里是否缺少一些小东西。

请纠正我并帮助我继续前进。

请在以下位置查看 jsfiddle： http://jsfiddle.net/q46aw/3/

HTML

         <div class="page">
           <div data-bind="with: person">
             <input data-bind="datepicker:fromDate, value:fromDate, datepickerOptions: {'dateFormat': 'mm-dd-yyyy' }" id="txtFromDate" />
           </div> 
         <span data-bind="text:person.fromDate"></span>
        </div>

Javascript

    ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var $el = $(element);

        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $el.datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", 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),
            current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};
$(function () {
    var demo = demo || {};
    //Constructor for a Person object
    demo.TY = function () {
        this.fromDate = ko.observable();
    }
    demo.viewmodel = (function () {
        //private
        var fromDateJSON = 'Date(1293858000000)';
        var person = new demo.TY()

            .fromDate(moment(fromDateJSON).format('MM-DD-YYYY'))

        //public
        return {
            person: person
        }
    })();
    //hookup knockout to our viewmodel
    ko.applyBindings(demo.viewmodel);
});

提前致谢，拉朱

【问题讨论】：

您的示例有效，不是吗？当我选择一个日期时，它会按预期显示在字段内。

标签： jquery jquery-ui knockout.js datepicker momentjs

【解决方案1】：

您的代码有 2 个问题：

您将日期选择器绑定到 fromDate 两次 (datepicker: fromDate + value: fromDate)
您的日期格式不正确，您可以使用mm-dd-yy 代替mm-dd-yyyy（参见http://api.jqueryui.com/datepicker/#utility-formatDate）

您可以在这里尝试： http://jsfiddle.net/m7f4z/

【讨论】：