Learn how to elevate your web development with the newly updated Telerik UI for Blazor DataPicker.
The main goal of input UI components is to help users enter values quickly, easily and efficiently. To achieve that goal, a component may:
At first glance, it may seem that all these extras belong to different components, but in fact, the Progress Telerik UI for Blazor DatePicker does a great job with all of them! Moreover, all Blazor date inputs feature several recent enhancements, which greatly improved the last bullet point (auto completion and auto correction of values). Let us explore the new features together.
Our Blazor DateInput component is a textbox on steroids, which is optimized for DateTime value entry. In turn, the Blazor DatePicker component is a DateInput on steroids, as it integrates a popup Calendar for a better user experience and more flexibility.
The common perception is that it’s easier and preferable to select a value from a list instead of typing it. I thought that too, until I saw how fast my local cashier can type product codes at the counter. People with these skills will clearly benefit from UI components that allow quick and convenient manual data entry.
And this is exactly what Telerik UI for Blazor provides via its date and time input components:
Telerik UI for Blazor 4.0 introduced the following configurable enhancements for manual entry in our date and time input components:
The Blazor Date Picker (and all our date input components) can change the value of invalid DateTime segments automatically. For example, if the value is January 31 and the user changes the month to February, the component will auto-correct the day to 28. Similarly, the component can also prohibit the user from entering an invalid value via the up/down arrow keys.
By default, the Blazor DatePicker will jump over to the next value segment when the user completes the current one. However, some users may be accustomed to typing the separator manually. This applies especially to fast users with an established muscle memory from other interfaces. Or, some users may think they need to type the separator manually, although they don’t have to.
On a related note, some users may prefer to switch segments with custom keys, not just the common ones (such as left and right arrow). Imagine a user that types on a small numeric pad with a limited choice of keys. Moreover, the arrows and digits overlap in function, so they can’t be used at the same time.
If I tell you that something happened in year ’22, most likely you will think about 2022. But is this always the case? For example, Bulgarian civil IDs include a two-digit year of birth. Figure out if a random person in the municipality archive was born in the early 20th or 21st century. Fortunately, the Blazor DatePicker removes this ambiguity. Depending on the component configuration, every two-digit year will strictly belong either to the current century or the previous one. Here’s how to configure it:
Normally, the DatePicker will hide the caret and select the focused segment of the component value. Users who prefer the classic experience and wish to know exactly where they are typing, can see a caret too.
Experiment with all the DatePicker typing settings immediately in our REPL Blazor playground, or even better, download Telerik UI for Blazor and explore all the goodies!
Once you try the empowered DataPicker component, don’t forget to share your experience and ideas in the comments sections below or by visiting the Telerik UI for Blazor Feedback Portal. Your input makes a difference.
Dimo Dimov is a Support Engineer at Progress, working on Telerik UI for Blazor. He is passionate about fast support service and well-structured documentation. If you succeed in taking the laptop from his hands, you can join him on a mountain hike or a marathon run.