Knockout Binding for KendoUI DatePicker

Knockout Binding for KendoUI DatePicker

by Rupesh Kokal

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 id="start" type="text" data-bind="kendoTimePicker: selectedItem" />
    <input id="end" type="text" data-bind="kendoTimePicker: a" />

 <hr/>

 <div data-bind="text: ko.toJSON(selectedItem)"></div>      

 <button data-bind="click: resetDefault">Reset Default</button>
</div>

JavaScript

//------------------Date Picker Knockout Custom Binding
    ko.bindingHandlers.kendoTimePicker= {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            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']['kendoTimePicker']) {
                                binding['_ko_property_writers']['kendoTimePicker'](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...