Ignore forward slash, allow various formats when using date input

1 Answer 41 Views
DateInput DatePicker DateTimePicker
Eli
Top achievements
Rank 1
Veteran
Eli asked on 24 May 2021, 07:53 PM

I have a common scenario that my users complain about and find annoying. 

1) I have a DatePicker with format of M/d/yyyy

2)They click in and (for example) quickly type 2/20/2021 expecting that to be the date, instead as soon as they hit the forward slash it jumps to the year and leaves them with 2/d/0020

3) In an attempt to fix it the user will press backspace to delete a character but that clears it all and leaves the yyyy highlighted, forcing them to stop their workflow and click back to the start and be careful not to mess anything up

This is not very user friendly.  Reproducible here: Blazor DatePicker Demos - Overview | Telerik UI for Blazor

 

I and our users much prefer what they are used to in your Telerik Ajax tools that pops open the calendar when focusing on the box and will allow for free flow typing of a date, allowing a variety of formats on the fly and verify on leaving the field. https://demos.telerik.com/aspnet-ajax/datepicker/overview/defaultcs.aspx

 

Are there any workarounds or should a feature request be submitted?

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Svetoslav Dimitrov
Telerik team
answered on 27 May 2021, 02:27 PM

Hello Eli,

I am sorry to see that the built-in component behavior is giving you a hard time.

 

When we evaluate the input of a date we take into account two things

  • The date itself
  • And if the separator is typed in. The separator is dependant on the provided date format in the Format parameter (for example it might be forward-slash (/), comma (,) or a full-stop (.)

The way the input focuses on the next date segment is

  • By typing a valid value, in the below examples I would take the Month segment as a base
    • Typing two (2) the input will automatically focus on the next segment singe there are no months with two digits that start with 2
    • Typing one (1) the input will allow the user to type another digit as there are months with two digits that start with 1 - 10, 11, 12
    • If the user would like to select January (1) he can either type 01, or 1 and tap on the separator or the right/left keyboard arrow
  • By tapping on the separator or clicking on the right/left keyboard arrow

That being said, this behavior is implementing in order to provide quick typing. If the format is M/d/yyyy the use can type 2252021 and the component will format it automatically to a valid DateTime object - 2/25/2021. 

The reason why we decided to take into account when user inputs in the separator is for the cases where they would like to enter a single digit month that starts with 1 as an alternative to the left/right keyboard arrow.

Taking into account the written above the behavior of the component is expected to remain the same and is not on the line for changes. 

Regards,
Svetoslav Dimitrov
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.

Eli
Top achievements
Rank 1
Veteran
commented on 27 May 2021, 03:19 PM

Thank you for the reply.

I can understand why some decisions were made, but this is inconsistent across your products. ASP.NET Core works the way I prefer: https://demos.telerik.com/aspnet-core/dateinput, As does Kendo React: https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/ in addition to the Telerik Ajax tools I already stated. I did not see any of the Telerik frameworks behave as Blazor components do.

I will use the built in InputDate going forward (which also performs in our preferred way) even though it lacks in other areas.
Svetoslav Dimitrov
Telerik team
commented on 28 May 2021, 01:56 PM

Hello Eli,

To take advantage of the feature the TelerikDatePicker offers above the built-in InputDate you can use it with a format separated with space - for example, Format="M d yyyy". If you set this as a format when the users click on the forward-slash our component will not automatically focus on the next date segment.

Let me know if this is a suitable solution for your application.

Eli
Top achievements
Rank 1
Veteran
commented on 28 May 2021, 03:10 PM

That works in principal but ultimately as soon as I implement something like that I will be questioned by users on why it is not showing the slashes in the edit display. I will use InputDate component or use a text box and have it validate the date when moving focus. At some point I may add a Feature Request to simply ignore format string and allow free edit and then validate to the format string on exit.
Svetoslav Dimitrov
Telerik team
commented on 01 Jun 2021, 07:00 AM

Hello Eli,

We added an Efficient Keyboard Input section in the Overview article for the DateInput component. It uses the information from my answer above and extends on it. You can take a look at it to get a better perspective on our decision of UX.

Tags
DateInput DatePicker DateTimePicker
Asked by
Eli
Top achievements
Rank 1
Veteran
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or