I am using Kendo React version:4.5.0 for Date Picker. For the DatePicker I am using format="MM/dd/yyyy" and formatPlaceholder={{ year : 'YYYY', month : 'MM', day : 'DD' }}.
For this I have two queries:
1. How to have the focus to change automatically from MM to DD to YYYY when the user is typing in the date? Right now we have to use left and right arrow keys to move.
2. Right now the when the user type in the date for example in the YYYY the year is being input from right to left. So, how to have that implemented from left to right ?
1 Answer, 1 is accepted
Hello, Gaurav,
Regarding both questions:
1. How to have the focus to change automatically from MM to DD to YYYY when the user is typing in the date? Right now we have to use left and right arrow keys to move. - I can suggest checking this discussion on the reasons behind the current behavior:
https://github.com/telerik/kendo-react/issues/135
2. Right now the when the user type in the date for example in the YYYY the year is being input from right to left. So, how to have that implemented from left to right? - Currently, the DatePicker and all date inputs only support right to left. Still, the ensure that I got the requirement right, for example, if the user type 1 2 3 4, the result should be 4321, is that correct?
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
when the user enters 2: it shows 0002 (it should be 2000)
now when the user enters 202: it comes as 0202 (should be 202)
so by right to left I mean the direction of digits being displayed for YYYY.
I saw that you have submitted a separate ticket about this and my colleagues provided an answer for it. I will share it here for visibility:
``
Please find the following stackblitz example, where i have changed the format from `MM/dd/yyyy` to `MM/dd/y`, which enables left-to-right input:
https://stackblitz.com/edit/react-cq1cdm?file=app/main.jsx
If additional information is needed, please follow up in the ticket or here.