Clear date on entering invalid dates in datepicker

1 Answer 222 Views
Date/Time Pickers Validation
Jeroen
Top achievements
Rank 1
Jeroen asked on 27 Jun 2023, 08:19 AM

Hello kendo,

When an user is entering the date with an invalid format like dd.mm.yyyy (so 27.06.2023) into our datepicker, it looks like the date is accepted in the UI, but the value is actually empty. What is confusing for the user. To fix this we would like to clear the value when an user entered an invalid date. How can we do this ?

I found an example for the datetimepicker, but it requires an initial filled in date, if you start with an empty value it's not working. The problem comes from the problem that it's impossible to tell if the value is empy or invalid.

https://docs.telerik.com/kendo-ui/knowledge-base/prevent-invalid-values
PS the script has an bug and is not working, add to following to the script to get it working:   

        $("#datetimepicker").kendoDateTimePicker({
          change: onChange,
          close: onClose,
          open: onOpen,
          value: new Date()
        });
        var lastValidDate = $("#datetimepicker").data('kendoDateTimePicker').value();
      });
    </script> 

Regards,
Jeroen

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 30 Jun 2023, 08:00 AM

Hi Jeroen,

This behavior is expected as the change event is not triggered when the initial value is null or when it is an invalid date it also evaluates to null. 

To overcome this you can manually trigger the change event on the change of the input.

$("#datetimepicker").on("change", function (e) {
     $("#datetimepicker").data('kendoDateTimePicker').trigger('change');
});

Dojo demo: https://dojo.telerik.com/OcAFITAk

Regards,
Nikolay
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Tags
Date/Time Pickers Validation
Asked by
Jeroen
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or