如何限制 Kendo DateTimePicker 的开始和结束时间?
How can I constrain the start and end hours of the Kendo DateTimePicker?
我在 ASP MVC 中使用 KendoUI DateTimePicker。当您 select 时间选择器时,您会得到 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))
)
编辑:我 selected 的答案让我走上了正确的道路,一旦我明白没有办法用 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(任意)日期时间,但只有时间部分被 Kendo 使用。我有一个 TimeSpan,但由于问题将其删除。 Display 属性对于防止 Kendo 的验证消息显示难看的 "HearingTime is not a valid date" 消息是必需的。
参见。 DateTimePicker
的时间范围无法限制,因此解决方法是将 TimePicker
与 DatePicker
分开。这还有其他缺点,但你可以这样做:
var t = $("#time-picker").kendoTimePicker().data("kendoTimePicker");
t.min("8:00 AM");
t.max("4:00 PM");
我在 ASP MVC 中使用 KendoUI DateTimePicker。当您 select 时间选择器时,您会得到 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))
)
编辑:我 selected 的答案让我走上了正确的道路,一旦我明白没有办法用 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(任意)日期时间,但只有时间部分被 Kendo 使用。我有一个 TimeSpan,但由于问题将其删除。 Display 属性对于防止 Kendo 的验证消息显示难看的 "HearingTime is not a valid date" 消息是必需的。
参见。 DateTimePicker
的时间范围无法限制,因此解决方法是将 TimePicker
与 DatePicker
分开。这还有其他缺点,但你可以这样做:
var t = $("#time-picker").kendoTimePicker().data("kendoTimePicker");
t.min("8:00 AM");
t.max("4:00 PM");