When my users are done typing in one date segment, I want the focus to pass to the next one automatically. 

Dear Sir/Madam,

We are piloting our application and repeatedly get the same feedback from our users: they find entering information in the date and time inputs annoying.

The reason for this is that they have to enter a date (say 1 december 2024) by entering:

• Day (1)
• Press /
• Month (12)
• Press /
• Year (2023)

Instead, they would like to enter a date in one go, say

• "01122023" should resolve to 1 december 2023.

• "0112" should resolve to 1 december 2024, because year is missing and we can then assume that we use the current year.

 

Likewise, they would enter times like "1005" for "10:05". Now they have to enter ":" to go to the minutes field.

 

We would like to respond to their feedback, but don't know to implement this. Is this something that Kendo supports? If not, we are willing to pay to give this feature request priority. Could you help us out?

 

Regards,

Peter

In some cases, a null value is valid for the DatePicker. However, if the user types an invalid (or partial date) the value of the component is also null. In these two cases the null values must not be treated equally, but I have no way to understand which is which. 

It would be great if KendoReact had a `WeekRangePicker` component which behaves similar to the native html element input type="week"

I use the DatePicker extensively in our application as people are entering in weather data. They often want to change the date by a day or two, so they find it annoying to open up the whole calendar to go back a single day. I think that the ideal UX would be to have the equivalent of the Spin Buttons on the DatePicker that exist on the DateInput. So, there would be the calendar for the date picker and the spinners so users can choose what works best for them.

Hello,

We've been experiencing a weird behavior with the date picker element. We wanted to have an auto advancing cursor that moves from date -> month -> year without the user having to manually press the arrow keys.

We based our solution off this previous method in your JQuery element. However the React element has some buggy behavior when it comes to updating existing date values in the input that makes this method impossible. (the functionality works correctly in the JQuery version of the library, just not React)

When updating an existing value in the box from a single digit value (e.g. 01, 02, 03, 04, but not 10, 11, 12) instead of overwriting the existing value it appends the new number the user entered. For example, if a 01, is in the box and the user types 2 it becomes 12, when it should have become 02.

This can be especially confusing for the user when working with named dates (e.g. "Jan", "Feb",  "Dec", etc) since they do not see the numbers involved. If the user is updating Jan, and they press 2. It should update to Feb not Dec...

I've attached a GIF of the problem below as I've described

As per the subject, you can no longer use the Calendar to select a date in a month before the currently selected Date. Please see the following demo:

https://stackblitz.com/edit/react-xc2oxm-wgsfhy?file=app%2Fmain.tsx

Steps to reproduce:

• Click on the Calendar button
• Click on any month before the currently selected month
• Click on any date in the month
• Observe that the day is changed correctly but the month is incorrectly incremented by one

This error is not observed if you:

• type in a date
• use the mousewheel to scroll to the earlier date instead of clicking on the month
• use Firefox instead of Chrome

We aren't certain but don't believe this error was present before the latest Chrome 113 update. The error is reproducible in all versions of KendoReact from 5.2.0 onwards.

https://codesandbox.io/s/keen-panka-vctttd?file=/app/main.tsx

In the attached video I am showing the steps taken to reproduce the bug from the reproduction link. Basically if you change the year in DatePicker's calendar - no matter which year you select - the year gets reset back to 1911. I was not able to reproduce this in Kendo's CodeSandbox examples until I noticed that they were using the legacy ReactDOM.render() instead of the new React 18's createRoot. As soon as I replaced it I was able to reproduce the bug.

Another strange observation is that I am able to reproduce this bug in only half of my tries after refresh, another colleague reproduces it in 20-25% of his tries, so it doesn't happen all the time but eventually it will. That's why I've recorded a video on a fresh reload of the attached reproduction. Also, you can sometimes see the year is already wrong after selecting it, or after subsequently selecting the month, or sometimes you don't see the year is reset to 1911 until after you select the specific date and the popup closes.

Although there are other ways to reproduce this issue, the one shown in the video is the easiest to hit the bad scenario. Also, we were not able to reproduce the issue on the DateTimePicker, although it seems to use the same Calendar component underneath.

Our assumptions having previously reported similar problems in Kendo after migrating to React 18 is that due to the concurrent rendering / batching of state updates in React 18's createRoot - something breaks the virtual scroll used in the calendar (in the video when I point to 1912 being the next year after the selected 2021, if we scroll a bit, the virtual scroll picks up and updates the incorrect years) so we end up with stale data for the year when selecting the month/date. This means that there might be other unwanted side effects that we just haven't stumbled upon.

This is a severe bug for our application's end users as they are unable to change the year in the date picker reliably. Falling back to the deprecated ReactDOM.render is not an option.