i can't change min date value on kendo datetimepicker mvc

Viewed 19

I have problem with "kendo datetimepicker". if i set min value like this:

.Min(new DateTime(2020,1,1,8,0,0)) 

i change minimum value of date, but time still starts since 00:01. If i set it like this:

.Min(new DateTime(DateTime.Now.Year,DateTime.Now.Month, DateTime.Now.Day,8,0,0))

i change date and time, but i can't set date since today. I tried set year as "2020" and rest as DateTime.Month, and DateTime.Day, but that don't work. Next i tried to prepare datetime and set it like this:

.Min(new DateTime(preparedDate.Year,preparedDate.Month, preparedDate.Day,8,0,0))

But that don't work too. Can someone tell me how i can set min time at 08:00?

1 Answers

The problem is that the minimum you set applies to the date and time together. Each of the things you tried fails because of this.

If you use .Min(new DateTime(2020,1,1,8,0,0)), you can't pick a date and/or time before 8:00 on 1/1/2020. So 7:00 on 1/1/2022 is available.

If you use .Min(new DateTime(DateTime.Now.Year,DateTime.Now.Month, DateTime.Now.Day,8,0,0)) you can't pick anything before 8:00 today. However, 7:00 is available for tomorrow's date and also you can't pick anything after 8:00 on a past date.

What you can do is use the change event of the DateTimePicker to complete a custom check and set the value yourself if the check fails.

You can see a demo using Kendo UI for jQuery.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="datetimepicker" />
<script>
  let currentDateTime = null;
  
$("#datetimepicker").kendoDateTimePicker({
    change: function(e) {
      var value = this.value();
      
      if (value.getHours() < 8) { // Check if the hour is before 8:00
        this.value(currentDateTime); // Return to old value
      } else {
        currentDateTime = value; // Store new value
      }
    }
});
</script>
</body>
</html>

Related