Setting DateTimePicker to show specific time range e.g. working hours only

Question

I am trying to configure my kendoDateTimePicker to show 9am to 6pm only. Is this possible?

Answer 1

With Kendo DateTimePicker you can select the min and max dates but not a time range for each day BUT you can do it with TimePicker.

Maybe you can decompose your UI in DatePicker and TimePicker and then choose max and min for conforming your time range.

Answer 2

I know it's has been a while since this question has been asked. but i will add my response for future reference.

kendo DateTimePicker does not support adding a range to the TimePicker. But you can add your own widget that does that.

(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);

    })(jQuery);

Then you can call your CustomDateTimePicker like this :

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

jsfiddle demo.

Answer 3

I just put together this hack, because I felt that Datetime pickers should be used for picking a date and a time instead of having the weird ui of having a datepicker and a timepicker that are used to compose a single value:

    $('#NewScheduledDateTime_timeview > li').each(function () {   

        bool removeTimeCondition = /* code to determine if time should be removed */

        if (removeTimeCondition)
            $(this).remove();
    })

The id of the list will be different. To find it, expand the time list and 'inspect element' of one of the times with your favorite browser's dev tools.

I ought to mention that this is liable to break if the Kendo UI is updated to a newer version. Like I said, it is a hack. But then again, even non-hacky things break when we tried updating the version of Kendo UI. Lessons learned: don't use Kendo UI.

Answer 4

     var startDateReference = $('.startDate').kendoDateTimePicker({
        format: "dd-MM-yy HH:mm:ss",
        value : new Date(),
     }).data("kendoDateTimePicker");

     startDateReference.timeView.options.min = new Date(2000, 0, 1, 7, 30, 0);
     startDateReference.timeView.options.max = new Date(2000, 0, 1, 18, 00, 0);

This is working for me