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

Posted

技术标签:

【中文标题】设置 DateTimePicker 以显示特定的时间范围,例如仅工作时间【英文标题】:Setting DateTimePicker to show specific time range e.g. working hours only 【发布时间】:2013-01-08 03:40:33 【问题描述】:

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

【问题讨论】:

您找到解决方案了吗? 【参考方案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);

这对我有用

【讨论】:

startDateReference.timeView.setOptions( min: new Date(2000, 0, 1, 7, 30, 0), max: new Date(2000, 0, 1, 18, 00, 0) ); 更适合我 sgissinger 的解决方案对我也有效,而 Danny 的则没有。编辑?【参考方案2】:

使用 Kendo DateTimePicker,您可以选择 minmax 日期,但不能选择每天的时间范围但是您可以使用 TimePicker 进行操作。

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

【讨论】:

【参考方案3】:

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

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.

【讨论】:

【参考方案4】:

我只是把这个技巧放在一起,因为我觉得日期时间选择器应该用于选择日期和时间,而不是使用日期选择器和时间选择器来组成单个值的怪异用户界面:

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

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

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

列表的 id 会有所不同。要找到它,请使用您最喜欢的浏览器的开发工具展开时间列表和某个时间的“检查元素”。

我应该提到,如果将 Kendo UI 更新到较新版本,这很可能会中断。就像我说的,这是一个黑客。但是话又说回来,当我们尝试更新 Kendo UI 的版本时,即使是非 hacky 的东西也会中断。经验教训:不要使用 Kendo UI。

【讨论】:

我不明白这段代码在做什么。你得到'txt',但什么也不做。 timeview 是 DateTimePickers 的一个属性吗? 当我使用 Kendo UI 时,DateTime 选择器将每个时间值(小时和分钟)列为 DateTimePicker 元素中某处的 元素。因此,我使用 jquery 来选择 DateTimePicker 中的所有 元素。然后您可以使用 filter() 函数,或者简单地遍历那些 元素并删除您希望禁用的元素。我编辑了 txt 的东西 - 它只是为了显示如何获取时间值。 NewScheduledDateTime_timeview 恰好是 Kendo 分配给 DateTimePicker 的 id。 绝妙的解决方案!

以上是关于设置 DateTimePicker 以显示特定的时间范围,例如仅工作时间的主要内容,如果未能解决你的问题,请参考以下文章

DateTimePicker 设置日历和时间文化

DateTimePicker - 如何将时间间隔设置为 20 分钟、一周中允许的特定日期和一天中的时间?

C#日期/时间控件DateTimePicker

如何设置datetimepicker的值

C# DateTimePicker控件如何精确设置显示时分秒

C# DateTimePicker控件如何精确设置显示时分秒