New to Kendo UI for jQueryStart a free 30-day trial

Override Hours in the DateTimePicker Popup

Updated over 6 months ago

Environment

ProductProgress® Kendo UI® DateTimePicker for jQuery
Operating SystemWindows 10 64bit
Visual Studio VersionVisual Studio 2017
Preferred LanguageJavaScript

Description

How can I override hours in the popup of the Kendo UI for jQuery DateTimePicker?

Solution

The following example demonstrates how to achieve the desired scenario.

<input id="datetimepicker" />
<script>
  $(function() {
    $("#datetimepicker").kendoDateTimePicker({
        value: new Date(2000, 10, 1),
        open: function(e) {
			if (e.view === "time") {
              e.sender.timeView.dataBind([
                new Date(1970, 0, 1, 9),
                new Date(1970, 0, 1, 11),
                new Date(1970, 0, 1, 13),
                new Date(1970, 0, 1, 15),
                new Date(1970, 0, 1, 17),
                new Date(1970, 0, 1, 19),
                new Date(1970, 0, 1, )
              ])
            }
        }
    });
  });
</script>

See Also