Geek asks and answers

Setting a DateTimePicker to display a specific time range, for example. opening hours only

I am trying to set my kendoDateTimePicker to display only from 9am to 6pm. Is it possible?

+5
source share
4 answers
     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);

It works for me

+3
source

With Kendo DateTimePickeryou can choose dates minand max, but not a time range for each day BUT you can do it with TimePicker.

Perhaps you can decompose your interface into DatePickerand TimePicker, and then select maxand minto match your time range.

+2
source

, - , . .

kendo DateTimePicker TimePicker. , .

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

CustomDateTimePicker :

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

jsfiddle demo.

+2

, , Datetime , ui datepicker timepicker, :

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

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

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

. , " " .

I should mention that this can break if the Kendo user interface is updated to a newer version. As I said, this is a hack. But then again, even non-hacker things break when we try to update the version of the Kendo user interface. Lessons learned: Do not use the Kendo user interface.

0
source

More articles:


All Articles