如何约束Kendo DateTimePicker的开始和结束时间?

时间:2015-07-29 21:41:05

标签: asp.net asp.net-mvc kendo-ui kendo-datetimepicker

我在ASP MVC中使用了KendoUI DateTimePicker。当您选择时间选择器时,您将在00:00-24:00之间获得时间。这对于人们滚动来说是笨拙的。我只希望08:00-16:00显示任何一天。有可能吗?这是我试过的。这失败了,因为它不是有效的DateTime。

                    @(Html.Kendo().DateTimePickerFor(x => x.HearingDate)
                      .Name("HearingDate")
                      .Min(new DateTime(0, 0, 0, 8, 0, 0))
                      .Max(new DateTime(0, 0, 0, 16, 0, 0))
                    )

编辑:我选择的答案让我走上了正确的道路,一旦我明白用DateTimePicker无法做到这一点。这是我的解决方案,混合了Kendo DatePickerFor和TimePickerFor。这需要花费很多时间来解决,主要是因为我遇到了TimePicker的问题。在我的项目中,允许日期和时间都为空。

模型

[Display(Name = "Hearing Date")]
public DateTime? HearingDate { get; set; }

[Display(Name = "Hearing Time")]
[DataType(DataType.Time)]
public DateTime? HearingTime { get; set; }

[Display(Name = "Hearing Date")]
public DateTime? HearingDateOnly { get; set; }

控制器

        if (model.HearingDateOnly != null && model.HearingTime != null)
        {
            var d = model.HearingDateOnly.Value;
            var t = model.HearingTime.Value;
            model.HearingDate = new DateTime(d.Year, d.Month, d.Day, t.Hour, t.Minute, t.Second);
        }

查看

                        @(Html.Kendo().DatePickerFor(x => x.HearingDateOnly)
                              .Name("HearingDateOnly")
                              .Min(DateTime.Now)
                              )

                        @(Html.Kendo().TimePickerFor(x => x.HearingTime)
                            .Name("HearingTime")
                            .Min(new DateTime(2010,1,1,8, 0, 0))
                            .Max(new DateTime(2010,1,1, 16, 0, 0))                                
                        )

注意: HearingDate没有显示在视图上,我在幕后使用它来加入另外两个。最小值和最大值是2010(任意)日期时间,但只有时间部分由剑道使用。我有一个TimeSpan,但由于问题删除了它。显示属性是防止Kendo的验证消息显示丑陋的“HearingTime不是有效日期”消息所必需的。

1 个答案:

答案 0 :(得分:1)

https://stackoverflow.com/a/14501173/3250365DateTimePicker的时间范围无法受到限制,因此解决方法是与TimePicker分开DatePicker。这有其他缺点,但你可以这样做:

var t = $("#time-picker").kendoTimePicker().data("kendoTimePicker");

t.min("8:00 AM");
t.max("4:00 PM");