DatePicker

Description

The DatePicker widget allows a user to enter a date directly or open a visual calendar to make a selection.

Official Kendo UI DatePicker documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

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

<input data-bind="kendoDatePicker: startDate" />
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date());
};

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 data-bind="kendoDatePicker: { value: startDate, max: maxDate, min: minDate }" />
<hr/>
<button data-bind="click: setToToday">Set to Today</button>
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date(2012,10,30));
    this.maxDate = new Date(2012, 11 , 31);
    this.minDate = new Date(2012, 0, 1);
    this.setToToday = function() {
        this.startDate(new Date());
    };
};

ko.applyBindings(new ViewModel());


This example demonstrates setting global options in ko.bindingHandlers.kendoDatePicker.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="kendoDatePicker: startDate" />
<hr/>
<button data-bind="click: setToToday">Set to Today</button>
<hr/>
<div data-bind="text: startDate"> </div>
var ViewModel = function() {
    this.startDate = ko.observable(new Date(2012,10,30));
    this.setToToday = function() {
        this.startDate(new Date());
    };
};

ko.bindingHandlers.kendoDatePicker.options = {
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31)
};

ko.applyBindings(new ViewModel());


Live Options

The kendoDatePicker binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
enabled

Determines if users can interact with the field

isOpen

Controls whether the navigatable calendar popup is visible

min

The minimum date allowed for selection in the field

max

The maximum date allowed for selection in the field

value

The current date value of the field

widget

If specified, will populate an observable with a reference to the actual widget