设置DateTimePicker以显示特定的时间范围,例如只工作时间

时间:2013-01-24 11:34:07

标签: kendo-ui

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

4 个答案:

答案 0 :(得分: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);

这对我有用

答案 1 :(得分:2)

使用剑道DateTimePicker,您可以选择minmax日期,但不能选择每天的时间范围您可以使用{{3} }}

也许您可以在TimePickerTimePicker中分解您的用户界面,然后选择DatePickermax来符合您的时间范围。

答案 2 :(得分:2)

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

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.

答案 3 :(得分:0)

我只是将这个黑客放在一起,因为我觉得应该使用日期时间选择器来选择日期和时间,而不是使用一个奇怪的ui,它有一个用于组成单个值的日期选择器和时间戳:

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

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

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

列表的ID将不同。要找到它,请使用您最喜欢的浏览器开发工具展开时间列表和其中一个时间的“检查元素”。

我应该提一下,如果Kendo UI更新到更新的版本,这可能会破裂。就像我说的,这是一个黑客。但是,当我们尝试更新Kendo UI的版本时,即使是非黑客的东西也会破裂。经验教训:不要使用Kendo UI。