DateTimePicker

Description

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

Official Kendo UI DateTimePicker documentation

Examples

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

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

                            ko.applyBindings(new ViewModel());

Wed Aug 20 2025 14:42:42 GMT+0000 (Coordinated Universal Time)

Live Options

The kendoDateTimePicker.md 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