6

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

hawx
  • 1,629
  • 5
  • 21
  • 37

4 Answers4

4

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.

Waelkat
  • 80
  • 10
3
     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

Danny
  • 113
  • 2
  • 9
2

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.

OnaBai
  • 40,767
  • 6
  • 96
  • 125
1

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.

Sava B.
  • 1,007
  • 1
  • 10
  • 21
  • I don't understand what this code is doing. You get 'txt' but do nothing with it. Is timeview an attribute of DateTimePickers? – redwards510 Jul 30 '15 at 16:15
  • Back when I was working with Kendo UI, the DateTime pickers listed each time value (hours and minutes) as
  • elements somewhere within the DateTimePicker element. So, I used jquery to select all the
  • elements in the DateTimePicker. Then you can use either the filter() function, or simply iterate over those
  • elements and remove ones that you wish to disable. I edited out the txt thing - it was there simply to show how to get at the time value.
    • – Sava B. Jul 30 '15 at 21:09
  • NewScheduledDateTime_timeview just happened to be the id that Kendo asigned to the DateTimePicker. – Sava B. Jul 30 '15 at 21:15
  • Brilliant solution! – Michael Rodrigues Sep 16 '19 at 13:25