剑道用户界面 - 设置日期时间选择器以显示特定时间范围，例如仅工作时间

Question

我正在尝试将我的 kendoDateTimePicker 配置为仅显示上午 9 点至下午 6 点。这可能吗？

Answer 1

我知道这个问题已经被问到已经有一段时间了。 但我会添加我的回应以供将来参考。

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 演示。

Answer 2

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

这对我有用

Answer 3

使用剑道DateTimePicker您可以选择min和max日期，但不能选择每天的时间范围，但您可以使用TimePicker来做到这一点。

也许您可以在DatePicker和TimePicker中分解您的 UI，然后选择 max 和 min 以符合您的时间范围。

Answer 4

我只是把这个技巧放在一起，因为我觉得日期时间选择器应该用于选择日期和时间，而不是有一个日期选择器和时间选择器的奇怪 UI 用于组成单个值：

    $('#NewScheduledDateTime_timeview > li').each(function () {   
        bool removeTimeCondition = /* code to determine if time should be removed */
        if (removeTimeCondition)
            $(this).remove();
    })

列表的 ID 将有所不同。要找到它，请使用您喜欢的浏览器的开发工具展开时间列表并"检查其中一个时间"元素。

我应该提到，如果剑道 UI 更新到较新版本，这很容易中断。就像我说的，这是一个黑客。但话又说回来，当我们尝试更新 Kendo UI 的版本时，即使是非黑客的东西也会崩溃。经验教训：不要使用剑道UI。