根据之前的 Datetimepicker 设置 Kendo Datetimepicker

Question

我有两个 Kendo 日期时间选择器，'OvertimeDateFrom' 和 'OvertimeDateTo'，用户必须 select 才能完成加班请求。当用户 select 的日期和时间来自 'OvertimeDateFrom' 时，我想将 'OvertimeDateTo' 设置为相同的日期，但允许它的时间值保持 select 可用。

我试过在 '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; }

Answer 1

对于遇到相同问题的任何人，我已经通过在我的函数中比较两个日期来解决这个问题，请参见下文。

'endChange' 函数仅比较 '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);
    }
}

根据之前的 Datetimepicker 设置 Kendo Datetimepicker

Set Kendo Datetimepicker based on previous Datetimepicker

asp.net-mvc

kendo-datetimepicker

kendodaterangepicker