Knockout Binding for KendoUI DatePicker

Knockout Binding for KendoUI DatePicker

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div id="example">
 <input type="text" data-bind="kendoDatePicker: selectedItem,enable: test()==2" />

 
</div>

JavaScript

var viewModel = {
    date: ko.observable(),
    test: ko.observable(), 
};

viewModel.dateEnabled = ko.computed(function() {
   return viewModel.test() === "2"; 
});

ko.bindingHandlers.kendoDatePicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var unwrap = ko.utils.unwrapObservable;
        var dataSource = valueAccessor();
        var binding = allBindingsAccessor();
        var options = {};
        var source;

        if (binding.datePickerOptions) {
            options = $.extend(options, binding.datePickerOptions);
        }

        if (dataSource) {
            var handleValueChange = function () {
                //change the knockout model object with the specified value
                var changeModel = function (value) {
                    if (ko.isWriteableObservable(dataSource)) {
                        //Since this is an observable, the update part will fire and select the 
                        //  appropriate display values in the controls
                        dataSource(value);
                    } else {  //write to non-observable
                        if (binding['_ko_property_writers'] && binding['_ko_property_writers']['kendoDatePicker']) {
                            binding['_ko_property_writers']['kendoDatePicker'](value);
                        }
                    }
                };

                //Get the selected Value from the Kendo ComboBox
                var selectedValue = this.value();
                //If they dont select anything, then there intent is to null out the value
                if (!selectedValue) {
                    changeModel(null);
                } else {
                    changeModel(selectedValue);
                }
                return false;
            };
            options.change = handleValueChange;
        }

        //handle the choices being updated in a Dependant Observable (DO), so the update function doesn't 
        // have to do it...