jQuery datePicker and datepicker options bindings

by CodeRenaissance

HTML

<script src="http://cloud.github.com/downloads/coderenaissance/knockout.mapping/knockout-1.3.0beta.js"></script>
<script src="http://cloud.github.com/downloads/coderenaissance/knockout.mapping/knockout.mapping.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<div id="test">
    <input data-bind="datepickerValue:test, datepickerOptions:{minDate:minDate, maxDate:maxDate} " type="input"/><br/>
    <div>Stored Data: <span data-bind="text:test" /></div>
</div>

CSS

#test input{
 width:80px;
 text-align:right;   
}

#ui-datepicker-div{
    background:white;
}

JavaScript

ko.bindingHandlers.datepickerValue= {
    init: function initDateValue(element, valueAccessor, allBindingsAccessor) {
        var eventsToCatch = ["change"];

        $(element).addClass('datepicker').datepicker({ duration: 0 });

        ko.utils.arrayForEach(eventsToCatch, function (eventName) {

            ko.utils.registerEventHandler(element, eventName, function () {
                var modelValue, elementValue, allBindings;

                modelValue = valueAccessor();
                elementValue = ko.selectExtensions.readValue(element);
                if (ko.isWriteableObservable(modelValue)) {
                    modelValue(elementValue);
                }
                else {
                    allBindings = allBindingsAccessor();
                    if (allBindings._ko_property_writers && allBindings._ko_property_writers.value) {
                        allBindings._ko_property_writers.value(elementValue);
                    }
                }
            });
        });
    },
    update: function (element, valueAccessor) {
        setTimeout(function updateDateValue() {
            var newValue, elementValue, valueHasChanged
            newValue = ko.utils.unwrapObservable(valueAccessor());
            elementValue = ko.selectExtensions.readValue(element);
            valueHasChanged = (newValue != elementValue);

            if (valueHasChanged) {
                var applyValueAction = function () { ko.selectExtensions.writeValue(element, newValue); };
                applyValueAction();
            }
        },0);
    }
};
ko.bindingHandlers.datepickerOptions = {//applies datepicker options
    update: function (element, valueAccessor) {

                var optionName, options, optionsObj, optionValue, jqElement;
        optionsObj = {};
        jqElement = $(element);
        options = ko.utils.unwrapObservable(valueAccessor()) || {};

        for (optionName in options) {
            if (options.hasOwnProperty(optionName)) {
            ...