knockout 绑定 jquery ui datepicker

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

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



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

        }

    }

};

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

http://stackoverflow.com/questions/6399078/knockoutjs-databind-with-jquery-ui-datepicker

 

js例子

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

datepicker的api

http://api.jqueryui.com/datepicker/