I am trying to configure my kendoDateTimePicker to show 9am to 6pm only. Is this possible?
问题:
回答1:
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
回答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.
回答3:
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.
回答4:
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.