淘汰赛js引导日期选择器答案

【问题标题】：knockout js bootstrap datepicker淘汰赛js引导日期选择器
【发布时间】：2013-05-23 14:40:26
【问题描述】：

我知道这个问题以前被问过很多次......但我已经尝试了所有解决方案，但没有一个有效......因此再次询问......

如何将 json 日期绑定到淘汰元素...下面是我的代码...

@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.DateOfBirth).HtmlAttributes(new { data_bind = "kodate: DateOfBirth, datepickerOptions : new Date()", @class= "datepicker" } )

    $(function () {
        $('.datepicker').datepicker({
            autoclose: true
        });
    });

    <input data-bind="kodate: startdate" class="datepicker"/>

kodate 定义如下

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

    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function (event) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
            value(event.date);
        }
    });

    ko.utils.registerEventHandler(element, "change", function () {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
            value(new Date(element.value));
        }
    });

},

update: function (element, valueAccessor) {
    var widget = $(element).data("datepicker");
    //when the view model is updated, update the widget
    if (widget) {
        widget.date = ko.utils.unwrapObservable(valueAccessor());

        if (!widget.date) {
            return;
        }

        if (_.isString(widget.date)) {
            widget.date = new Date(parseInt(widget.date.replace(/\/Date\((.*?)\)\//gi, "$1")));
            //widget.date = new Date(widget.date);
        }

        widget.setValue();
    }
},

update_old: 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")));
    }

    $(element).datepicker("setValue", value);
}
};

现在日期显示正确...但是当我发布日期时...它以 json 格式发布，模型绑定器无法将 json 日期 (/Date(1339230900000)/) 转换为实际日期，因此该日期在服务器端仍然为空...

如何确保模型绑定器将 json 日期 /Date(1339230900000)/ 转换为服务器端 DateTime 或如何以不同格式发布日期以便模型绑定器能够识别日期？？

有趣的是，如果我更改日期，那么它会以 ISO 格式发布，但如果我不更改日期，那么它会以 json 格式发布...所以初始化代码可能有问题...

我正在使用引导日期选择器：https://github.com/eternicode/bootstrap-datepicker

非常感谢任何帮助...

【问题讨论】：

标签： asp.net-mvc json knockout.js

【解决方案1】：

执行此操作的最简单方法是使用 Moment.js 等客户端库来正确格式化您的日期，同时保持 Knockout 提供的双向数据绑定。一个简单的入门方法是使用一个轻量级插件，如下所示 - http://makingsense.github.io/moment-datepicker/

您不需要使用该插件，您只需要编写自己的自定义绑定处理程序来处理获取和设置日期。我过去使用过的一个例子-

注册绑定处理程序以格式化要绑定的日期 -

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

        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

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

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

然后是标记 -

<div class="span4">
    <label>Start Date : </label><input data-bind="datepicker: startDate, datepickerOptions: { maxDate: new Date() }" />
</div>

注意：此答案来自其他答案的汇总。

【讨论】：