Kendo UI custom DateTimePicker

Kendo UI custom DateTimePicker : add time range

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css">
<input id="date-picker">

CSS

.log {
  background-color: #eee;
  margin: 20px 0;
}

JavaScript

(function($) {
            var dateTimePicker = kendo.ui.DateTimePicker;

            var MyWidget = dateTimePicker.extend({

                init: function(element, options) {
                    dateTimePicker.fn.init.call(this, element, options);
                },
                startTime: function(startTime) {
                    var timeViewOptions = this.timeView.options;
                    timeViewOptions.min = startTime;
                    this.timeView.setOptions(timeViewOptions);
                },
                endTime: function(endTime) {
                    var timeViewOptions = this.timeView.options;
                    timeViewOptions.max = endTime;
                    this.timeView.setOptions(timeViewOptions);
                },
                options: {
                    name: "CustomDateTimePicker"
                }
            });

            kendo.ui.plugin(MyWidget);

        })();
        
        
var datePicker = $("#date-picker").kendoCustomDateTimePicker().data("kendoCustomDateTimePicker");
    datePicker.startTime("07:00");
    datePicker.endTime("11:00");