DatePicker Min and Max value permit date out of range

[FranckSix]

When I use the DatePicker, the calendar displays a date between the minimum and maximum values, which is fine. However, if I manually enter a date before the minimum or after the maximum value, nothing prevents me from doing so. Even worse, the change event is no longer triggered. There's no way to validate the input manually if it's out of range.

Wouldn't it have been better for the control to block manually entered values ​​that exceed the allowed range?

[Jay]

If I manually enter a date outside the range, it changes the displayed date to the closest date in the range, as you can see in this dojo. If you run the dojo and manually enter a date outside the range, the displayed date changes and no change event fires. 

However, if you enter a valid value and then manually change it to an invalid value, once again the displayed date changes to the closest date in the range, but the change event does fire with a null value. 

My assumption would be, then, that in the first case, the value was null and after you enter an invalid date, it remains null so no change occurred, even though a date is displayed.

Admittedly, you can get the behavior you describe if you set autoAdjust to false, though even then, if you change a valid date to an invalid date, the change event does still fire with a null value.

[FranckSix]

Hi Jay

It seem the magic operate only if the option dateInput is set to true

Just notice that the change event is called only for the first wrong value. The correction change by Kendo control to minimal value not trigger change event.

[Jay]

Yes, it looks like for the autoAdjust to occur, you must have dateInput true (not the default) and autoAdjust true (the default).

However, the change event is called when the value gets set to null. So if I select a valid value, the change event gets called. If I then change it to invalid, the change event gets called. If I then select another valid value, the change event gets called again, and changing that to an invalid value once again causes the change event to get called.

If I change it to an invalid value, then change it to a different invalid value, the change event won't be called, I presume for similar logic that the value gets set to null for the first invalid value, and changing to another invalid value doesn't change it from null so no change event fires.

[Neli]

Hello Francis and Jay,

DatePicker Value, Range, and Change Event Logic

• With dateInput: true and autoAdjust: true (default), manually entering a date outside the min/max range will auto-adjust the displayed value to the closest allowed date.
• Indeed, in order for the autoAdjust to take effect, the dateInput options should be enabled as described in the API - https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/datepicker/configuration/autoadjust 
• If you enter an invalid date (out of range), the underlying value is set to null. The change event only fires if the value actually changes (e.g., from a valid date to null, or from null to a valid date).
• Entering multiple consecutive invalid dates does not trigger additional change events, because the value remains null.
• If you enter a valid date after an invalid one, the value changes from null to the new date, and the change event fires again.
• When the DatePicker corrects the input to the closest allowed date (auto-adjust), the change event is not triggered if the value did not change.

Blocking or Validating Out-of-Range Manual Input

The DatePicker does not block manual entry of out-of-range dates by default. To enforce stricter validation or provide feedback, you can use a custom validation rule with the Kendo Validator. This allows you to check the input and respond as needed, even if the DatePicker itself does not block the entry.

Example: Custom Validation for Date Range

$("#datepicker").kendoDatePicker({
  min: new Date(2024, 5, 1),
  max: new Date(2024, 5, 30),
  dateInput: true
});

$("#form").kendoValidator({
  rules: {
    dateRange: function(input) {
      if (input.is("[name=datepicker]") && input.val()) {
        var value = kendo.parseDate(input.val());
        var min = new Date(2024, 5, 1);
        var max = new Date(2024, 5, 30);
        return value >= min && value <= max;
      }
      return true;
    }
  },
  messages: {
    dateRange: "Please enter a date within the allowed range."
  }
});

This approach lets you validate manual input and provide user feedback for out-of-range dates.

Regards,
Neli
Progress Telerik

[FranckSix]

Hi Nelly,

Thank you very much for the example, I will apply this workaround onto my solution 😊.
But in an other side, it would be helpful if the control does it out of the box with the min and max properties...

[Neli]

Hi Francis,

 I would suggest you log the issue as a new feature requets in our Feedback Portal:

- https://feedback.telerik.com/kendo-jquery-ui

By posting it there, other users can vote for the request, which helps our team prioritize and consider it for future implementation based on community interest.

Regards,

Neli