Last Updated: 11 May 2020 10:11 by ADMIN
Release 2.13.0
Created on: 10 Mar 2020 15:42
Category: DatePicker
Type: Bug Report
Typing a valid value for a segment focuses the next segment automatically

Many users would prefer to not have to use their mouse when entering data. This makes their job much more efficient when they can keep their hands in one place. I would expect to be able to type "05/22/2020" and also "05222020" into the datepicker but it keeps getting stuck on the day part. If you look at the demo for MVC, when you type those values, it accepts them but the demo for the Blazor datepicker does not.


The MVC date picker does not have the described behavior. By default it is a simple <input> without validation so it will take any input, but typing in the numbers in sequence like that won't select a date. See the rest of the discussion and the updated title for more details on the behavior and issue this will fix.


To reproduce, go to and tab into the datepicker input. Try typing "05/22/2020" and you will get a result of "5/20/yyyy" because it gets stuck on the dd section. 

To see the expected functionality, go to the MVC demo site ( and tab into the datepicker. Try typing "05/22/2020" and you will get a value of "05/22/2020" which is what it should be.

This should work when typing both "05/22/2020" and "05222020" since users will be even more efficient if they don't need to type the /.

Marin Bratanov
Posted on: 20 Mar 2020 13:24

Hi everyone,

I have amended the title so it better reflects what we would do. It is actually related to the post by Rick - typing with the keyboard should focus the next segment every time a valid input has been achieved. To take the provided example - if you write "11" for the month, focus should move to the next segment.

I must also note that the MVC date picker does not have this behavior.


Marin Bratanov
Progress Telerik

 UI for Blazor
Posted on: 18 Mar 2020 18:51

I'm going to add a scenario to this thread on behalf of another customer as it's related:


"If the month entered is 2 through 9, as soon as that digit is entered the focus moves to the Day section. But if it's 1, 10, 11, or 12, you need to use the arrow key to move to the Day section. So from the user's point of view, the navigation behavior within the control depends on which month was entered. This will guarantee data entry mistakes and is not usable. If there's a way to change that behavior that would be fine, but so far I haven't found a way."

Marin Bratanov
Posted on: 13 Mar 2020 14:26

Hi Kyle,

Let's keep this discussion here so we can determine what behavior you expect from the component.

To begin with, there is an issue with writing the years right now, and you can Follow it here: It breaks the typing at the moment, so you won't be able to experience the full potential of the Blazor date input. In short - you can use the arrows to move left and right between the date/time segments to change them. You can also use the up/down arrows instead of typing numbers or day/month names. The ability to keep typing in the current segment is a conscious choice in our Blazor component.

On my end, both components behave in, essentially, the same way. You have to replace the current text with the new one. In the MVC demo, merely typing numbers does not update the date. I am attaching here a short video that illustrates what I see and what I expect so you can compare and confirm if I am missing something.

Once we establish a baseline and a working example of the desired behavior, we will be able to determine how to proceed.


Marin Bratanov
Progress Telerik

 UI for Blazor
Attached Files: