jQuery datepicker，设置敲除 observable 的日期格式答案

【问题标题】：jQuery datepicker, Set the date format for knockout observablejQuery datepicker，设置敲除 observable 的日期格式
【发布时间】：2017-11-05 20:10:12
【问题描述】：

使用 jQuery/jQueryUI 日期选择器，我如何为在 [afore提到的] 日期选择器上具有数据绑定的可淘汰可观察对象设置日期格式？

我已经设置了格式：

<input type="text" data-bind="datepicker: ExampleDate, datepickerOptions: { datePattern: 'DD-MM-YYYY', .... }" />

但这并没有反映在淘汰赛变量上。日期仍然是后端无法解释的 JavaScript 格式，如 C# .Net。

【问题讨论】：

标签： jquery .net knockout.js jquery-ui-datepicker knockout-3.0

【解决方案1】：

为 datepicker 创建一个剔除自定义绑定将允许这种日期格式。

修改这个答案（修复“changeDate”错误并添加observable setter）https://stackoverflow.com/a/6613255/712700，下面会这样做：

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

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        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");
        });
        var dateValue = $el && $el.length > 0 ? $el[0].value : undefined;
        if (dateValue) {
            valueAccessor()(dateValue);
        }
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

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

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

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
        var dateValue = $el && $el.length > 0 ? $el[0].value : undefined;
        if (dateValue) {
            valueAccessor()(dateValue);
        }
    }
};

设置淘汰赛 observable 的部分是这样的：

var dateValue = $el && $el.length > 0 ? $el[0].value : undefined;
if (dateValue) {
   valueAccessor()(dateValue);
}

另请注意，如果您使用的是 C# .Net，并且您有一些日期（最初）从后端进入 JS 土地，您可以在那时格式化您的日期，这样它就不会变成 JavaScript 日期，而是如果您碰巧将其传回，后端将接受它是一种友好的方式。这就是 Newtonsoft 的做法：

var backendSerialisedModel = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter() { DateTimeFormat = "dd-MM-yyyy" }));

【讨论】：