jQuery datepicker，设置 knockout 可观察的日期格式

Question

使用 jQuery/jQueryUI 日期选择器，如何为在[前述]日期选择器上具有数据绑定(bind)的 knockout 可观察对象设置日期格式？

我已经使用以下方式设置了格式:

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

但这并不反射(reflect)在 knockout 变量上。日期保留为 JavaScript 格式，后端无法解释，如 C# .Net。

Answer 1

为日期选择器创建 knockout 自定义绑定(bind)将允许此日期格式。

修改此答案(修复“changeDate”错误并添加可观察的 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);
        }
    }
};

设置可观察的 knockout 的部分是这样的:

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