使用jquery-ui datepicker敲击数据绑定

Question

我正在使用jQuery UI datepicker.它背后的HTML输入字段当前连接到KnockoutJS作为dependentObservable,但是当它在viewmodel中设置它的值时,datepicker会丢失其格式.

我该怎么做而不丢失格式？我希望viewModel不要知道它是一个jQuery datepicker.

Answer 1

您可以编写一个自定义绑定,使用datepicker API在字段中设置日期,并通过正确读取日期来设置您的observable的值.

自定义绑定可能如下所示:

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

        //initialize datepicker with some optional options
        $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);   
        }
    }
};

您会像以下一样使用它:

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

这datepickeroptions将是可选的,可以包括您想要传递给datepicker()呼叫的任何内容.

此外,这假设您使用日期的可观察量.如果您想要使用不可观察的单向绑定,绑定必须做更多的工作,但这不太可能.

示例:http://jsfiddle.net/rniemeyer/NAgNV/

Answer 2

我不得不对RP Niemeyer的代码进行轻微编辑,以使用dateFormat选项替换我的代码

$(element).datepicker("getDate")

同

$(element).val()

所以日期的格式化版本在引擎盖下正确传递.

Answer 3

我一直在使用RP Niemeyer的代码标记为上面的答案,但自从我使用它以来,我对它进行了一些小改动.我以为我会在这里发帖 也许它会帮助别人.它几乎是一样的,唯一的区别是如果元素在页面加载时有一个值,那么它将保留其值.另外,我创建$elem了一个变量,以便$(element)jQuery必须执行的处理更少.

ko.bindingHandlers['jqDatePicker'] = {
    'init': function(element, valueAccessor, allBindingsAccessor) {
        /* Initialize datepicker with some optional options */
        var options = allBindingsAccessor().jqDatePickerOptions || {},
            prop = valueAccessor(),
            $elem = $(element);

        prop($elem.val());

        $elem.datepicker(options);

        /* Handle the field changing */
        ko.utils.registerEventHandler(element, "change", function () {
            prop($elem.datepicker("getDate"));
        });

        /* Handle disposal (if KO removes by the template binding) */
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $elem.datepicker("destroy");
        });
    },
    'update': function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $elem = $(element),
            current = $elem.datepicker("getDate");

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