Set Kendo Datetimepicker based on previous Datetimepicker

Question

I have two Kendo Datetimepickers, 'OvertimeDateFrom' and 'OvertimeDateTo' that a user must select for completing an Overtime request. When a user selects the date and time from 'OvertimeDateFrom', I would then like to set 'OvertimeDateTo' to the same date but allow it's time value to remain selectable.

I've tried using .Max(DateTime.MaxValue) and .Max(DateTime.Today) on 'OvertimeDateTo' however this doesn't limit the date to the date of '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)

I've also tried using the Metadata class to validate the dates for this but only Required works, AssertThat doesn't work.

[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

For anyone who runs into the same issue, I've manged to solve this by comparing both dates within my function, see below.

The 'endChange' function compares only the dates from 'OvertimeDateFrom' and 'OvertimeDateTo' but still allows time to be selected. If the date for 'OvertimeDateTo' is greater than 'OvertimeDateFrom' then 'OvertimeDateTo' automatically loses it's value. If the dates are the same but it's time is greater, which it should be, then this is acceptable. Once 'OvertimeDateTo' is emptied then the metadata class validation kicks in to prevent the user from saving the request as it's a required field.

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