[英]Set Kendo Datetimepicker based on previous Datetimepicker
我有兩個 Kendo Datetimepickers,'OvertimeDateFrom' 和 'OvertimeDateTo' 用戶必須 select 才能完成加班請求。 當用戶從“OvertimeDateFrom”中選擇日期和時間時,我想將“OvertimeDateTo”設置為相同的日期,但允許它的時間值保持可選。
我試過在“OvertimeDateTo”上使用.Max(DateTime.MaxValue)
和.Max(DateTime.Today)
,但這並不會將日期限制為“OvertimeDateFrom”的日期。
<script>
function startChange() {
var endPicker = $("#OvertimeDateTo").data("kendoDateTimePicker"),
startDate = this.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate() + 0);
endPicker.min(startDate);
}
}
function endChange() {
var startPicker = $("#OvertimeDateFrom").data("kendoDateTimePicker"),
endDate = this.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
startPicker.max(endDate);
}
}
<div class="col-md-10">
@(Html.Kendo().DateTimePicker()
.Name("OvertimeDateFrom")
//.Value(DateTime.MaxValue)
//.Min(DateTime.MinValue)
//.Max(DateTime.MaxValue)
.ParseFormats(new string[] { "dd/MM/yyyy" })
.Events(e => e.Change("startChange"))
.HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
)
@Html.ValidationMessageFor(model => model.OvertimeDateFrom)
</div>
@(Html.Kendo().DateTimePicker()
.Name("OvertimeDateTo")
.Value(DateTime.MaxValue)
.Min(DateTime.MinValue)
.Max(DateTime.MaxValue)
.ParseFormats(new string[] { "dd/MM/yyyy" })
.Events(e => e.Change("endChange"))
.HtmlAttributes(new { @class = "form-control", style = "width:100%;" })
)
@Html.ValidationMessageFor(model => model.OvertimeDateTo)
我還嘗試使用元數據 class 來驗證此日期,但僅 Required 有效,AssertThat 無效。
[Required(ErrorMessage = "Please Complete")]
[DataType(DataType.DateTime)]
[Display(Name = "OvertimeDateFrom")]
public DateTime OvertimeDateFrom { get; set; }
[Required(ErrorMessage = "Please Complete")]
[AssertThat("OvertimeDateTo <= Today()", ErrorMessage = "Date Processed cannot be a date that is in the future.")]
[AssertThat("OvertimeDateTo >= OvertimeDateFrom", ErrorMessage = "Date Processed cannot be before Date Received.")]
[DataType(DataType.DateTime)]
[Display(Name = "OvertimeDateTo")]
public DateTime OvertimeDateTo { get; set; }
對於遇到相同問題的任何人,我已經通過比較我的 function 中的兩個日期來解決這個問題,請參見下文。
'endChange' function 僅比較來自 'OvertimeDateFrom' 和 'OvertimeDateTo' 的日期,但仍允許選擇時間。 如果“OvertimeDateTo”的日期大於“OvertimeDateFrom”,則“OvertimeDateTo”會自動失去它的值。 如果日期相同但時間更長,這是應該的,那么這是可以接受的。 一旦“OvertimeDateTo”被清空,元數據 class 驗證就會啟動,以防止用戶保存請求,因為它是必填字段。
function endChange() {
var startPicker = $("#OvertimeDateFrom").data("kendoDateTimePicker"),
endDate = this.value();
var startValue = $("#OvertimeDateFrom").data("kendoDateTimePicker").value();
if (endDate.getDate() > startValue.getDate()) {
alert("You can't select an end date greater than start date");
**/*clear field automatically if end date is greater*/**
$("#OvertimeDateTo").data('kendoDateTimePicker').value("")
}
else {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
startPicker.max(endDate);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.