This example demonstrates passing a single option to bind against the value of the TimePicker widget.

<input data-bind="kendoTimePicker: startTime" />
<hr/>
<div data-bind="text: startTime"> </div>

var ViewModel = function() {
    this.startTime = ko.observable(new Date(2012, 11, 31, 11, 59, 59));
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute with value now being explicitly specified. The setToToday button makes an update to the view model to show that the widget responds accordingly.

<input type="checkbox" data-bind="checked: isOpen" /> Open<br/>
<input type="checkbox" data-bind="checked: enabled" /> Enabled<br/>
<button data-bind="click: setToNow">Set to now</button>
<hr/>
<input data-bind="kendoTimePicker: { value: startTime, min: minTime, max: maxTime, enabled: enabled, isOpen: isOpen }" />
<hr/>
<div data-bind="text: startTime"> </div>

var ViewModel = function() {
    this.startTime = ko.observable(new Date(2012, 11, 31, 10, 0, 0));
    this.isOpen = ko.observable(false);
    this.enabled = ko.observable(true);
    this.minTime = new Date(1950, 0, 1, 8, 0, 0);
    this.maxTime = new Date(2049, 11, 31, 18, 0, 0);
    this.setToNow = function() {
        this.startTime(new Date());
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoTimePicker.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<input data-bind="kendoTimePicker: startTime" />
<hr/>
<div data-bind="text: startTime"> </div>

var ViewModel = function() {
    this.startTime = ko.observable(new Date(2012, 11, 31, 10, 0, 0));
};

ko.bindingHandlers.kendoTimePicker.options = {
    min: new Date(1950, 0, 1, 8, 0, 0),
    max: new Date(2049, 11, 31, 18, 0, 0)
};

                            ko.applyBindings(new ViewModel());