根據之前的Datetimepicker設定KendoDatetimepicker

我有兩個 Kendo Datetimepickers，“OvertimeDateFrom”和“OvertimeDateTo”，用戶必須選擇它們才能完成加班請求。當用戶從“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)

我也嘗試過使用 Metadata 類來驗證日期，但只有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; }

uj5u.com熱心網友回復：

對于遇到相同問題的任何人，我已經設法通過比較我的函式中的兩個日期來解決這個問題，見下文。

“endChange”函式僅比較“OvertimeDateFrom”和“OvertimeDateTo”中的日期，但仍允許選擇時間。如果“OvertimeDateTo”的日期大于“OvertimeDateFrom”，則“OvertimeDateTo”會自動失去其值。如果日期相同但時間更長，應該是這樣，那么這是可以接受的。一旦“OvertimeDateTo”被清空，元資料類驗證就會啟動，以防止用戶保存請求，因為它是必填欄位。

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);
    }
}

標籤：asp.net-mvc 剑道日期时间选择器 剑道日期范围选择器

上一篇：.Net6RazorView發布后未更新

下一篇：Renci.SshNet.Common.SftpPermissionDeniedException：'權限被拒絕'