More User Friendly Data Entry

[Michael Salzlechner]

we are using the time picker and show time in 24 hour mode (ie 14:29) 

but data entry always requires the user to type in the leading 0 and of course also the :

we used to have a time picker in windows that had a smart mode to determine what the user typed 

for example

0800 -> 8am

8a -> 8am

820 -> 08:20am

6p -> 6pm

is it possible to do something similar with the TimePicker control?

[Mallesh Ravi Chandran]

The Syncfusion TimePicker control does support custom input formats through the InputFormats property, which allows you to specify how time values are entered by users. When a user types time in one of these formats, it will automatically be converted to the display format after pressing enter, tab, or when the input loses focus.

Currently, the TimePicker supports standard and custom format strings as defined by the .NET Framework. Here's how you can implement custom input formats in Blazor:

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" Format="hh:mm:ss" InputFormats='new string[] { "hh:mm tt", "hh mm tt" }' @bind-Value="@Value"></SfTimePicker>

@code {

    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);

}

Gif : 

Sample : https://blazorplayground.syncfusion.com/embed/LDBSMiWbBPKrvHpt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Documentation reference : https://blazor.syncfusion.com/documentation/timepicker/time-format#input-formats

Demo reference : https://blazor.syncfusion.com/demos/timepicker/time-format?theme=fluent2

However, the specific abbreviated formats you mentioned ('080', '8a', '820', and '6p') aren't directly supported in the current implementation. The TimePicker follows standard .NET date and time format strings rather than the more flexible "smart input" patterns found in some Windows time pickers.

We have shared the sample for your reference, please review the attached sample .