Date Limits definition does not prevent user from entering a date outside of the range for the DatePicker component

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 24 Feb 2021 12:13 by ADMIN

Alexander

Created on: 22 Feb 2021 20:58

Type: Bug Report

Date Limits definition does not prevent user from entering a date outside of the range for the DatePicker component

Defined a date rang. But it allows to enter a date larger than a max date of the range. Both via calendar and manually.

const minDate = new Date(1, 1, 1);
const maxDate = new Date(9999, 12, 31);

          return (
           
              <DatePicker value = {this.state.value}
                 
                  min={minDate}
                  max={maxDate}
                
              />

Attached Files:

screenshot-6.jpg

3 comments

ADMIN

Krissy

Posted on: 24 Feb 2021 12:13

Hi Alexander,

Thank you for providing an example and referring to our documentation.
By default, the HTML date input allows entering with the keyboard a date that is outside of the range, which is why the DateRangePicker component also allows doing so.

We are adding an invalid indication to showcase that the date is outside of the range, but the user can still enter it as sometimes they need to go past an invalid value in order to to to a valid one.

If the requirement is to prevent all invalid dates we can validate the value during onChange and not update the state of the value of the DateRangePicker if the value entered is not correct.

Here is the link to a possible soluton I am suggesting:

https://stackblitz.com/edit/react-daterangepicker-keyboard-restriction?file=app/main.jsx

The limitation of this solution is that, for example, if the start date is the 2nd day of the month, if you want to manually enter through the keyboard the 10th day of the month, the program will not update the state of the date and will not allow you to change it. This is because the first number entered is 1 and the program automatically checks whether the 1st day of the given month is valid. In this case, is not, and this will not allow you to enter the desired valid date because you need to input an invalid one first. This behavior is exactly why we only mark it as invalid as otherwise, it is more restrictive.

Please have in mind that the provided example is only a possible suggestion and a custom logic can be used to validate the range based on the application requirements.

Hope this is helpful.

Regards,
Krissy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Alexander

Posted on: 23 Feb 2021 18:13

Thanks, Krissy

Setting maxDate = newDate(9999, 11, 31).

But the DatePicker allows to enter the date above 31/12/9999 via keyboard.

The calendar is ok, it maintains the limit.

But when I select the year part, enter 9999 and then hit "Up" key, it increases the value beyond the date range.

Same issue happens on the telerik samples site: https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date-ranges/

User can type and increase the value outside of the date range.

The validity state is supposed to be set to false, but is there a way to prevent user from entering invalid date value outside of the specified date range?

ADMIN

Krissy

Posted on: 23 Feb 2021 08:31

Hi Alexander,

Thank you for providing an example.

When creating a new date, January starts at index 0 and December has an index of 11. I see that you've created a new date, where the index of the month is 12, but since the last month is defined with 11, this means that the date automatically goes to the next month - January.

If the maximum date has to be the 31st of December then the max date should be defined like this: const maxDate = newDate(9999, 11, 31).
Also, if the start date should be the 1st of January, for example, it needs to be defined like this: const minDate = newDate(1,0,1).

More information about the Date() object can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

Hope this was helpful.

Regards,
Krissy
Progress Telerik