In <TelerikTimePicker>, how can I enable format in the dropdown for minutes in two digits like 01, 02, 03, 04? Currently, I found these formats for Blazor Timepicker - https://demos.telerik.com/blazor-ui/timepicker/formats. All formats are showing single-digit minutes like 1, 2, 3, and 4.

I want to set the format in the dropdown for minutes to be two digits. Same as here https://demos.telerik.com/aspnet-mvc/timepicker/component-type.

Hello,

For the most part, I think Telerik has the best library of Blazor controls and my team is happy with it. That said, the Time Picker control in particular falls short in terms of look/feel/user experience to some other libraries. In doing research for a project, most apps are using a clock-based standard. This results in less clicks and is more familiar and intuitive (especially on mobile). We would like to see a clock-based version of the time picker or an option to use this. Material also has a way to combine this with the date picker (to handle date time fields). 

Is this (by chance) already in the works? I've included some examples below. 

Material example: https://material-ui-pickers.dev/demo/timepicker
MudBlazor example: https://mudblazor.com/components/timepicker#basic-usage

Thanks!
- Joe

The NOW button in the TimePicker's TimeView sets the time value, according to the server's time zone. Instead, it should use the client-side (user) time zone.

===

Telerik edit:

In the meantime, you can subscribe to the TimePicker's ValueChanged event and detect when the user clicks on Now. In such cases, the event handler will receive the current server time with a small margin of error, that depends on the latency.

<TelerikTimePicker Value="@TimePickerValue"
                   ValueChanged="@( (DateTime? d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>

@code {
    private DateTime? TimePickerValue { get; set; }

    private void TimePickerValueChanged(DateTime? newValue)
    {
        if (newValue.HasValue && newValue - DateTime.Now < new TimeSpan(0, 0, 1))
        {
            // Retrieve and set the correct user's local time. The dummy code below is just for testing.
            TimePickerValue = DateTime.Now.AddMinutes(2);
        }
        else
        {
            TimePickerValue = newValue;
        }
    }
}

When you type the time in the time picker, it changes the date to the current date, while it should change only the time portion.

---

ADMIN EDIT

A workaround is to use the original year, month and date portions of the view-model field and capture the time portion from the ValueChanged event:

@selectedTime?.ToString("F")

<TelerikTimePicker Min="@Min" Max="@Max" Format="hh:mm:ss tt" 
                   Value="@selectedTime" ValueChanged="@( (DateTime? v) => ValueChangedHandler(v) )">
</TelerikTimePicker>

@code {
    public DateTime Min = new DateTime(1900, 1, 1, 10, 0, 0);
    public DateTime Max = new DateTime(1900, 1, 1, 20, 0, 0);
    public DateTime? selectedTime { get; set; } = new DateTime(1900, 1, 1, 12, 0, 0);

    void ValueChangedHandler(DateTime? updatedTime)
    {
        selectedTime = new DateTime(
                selectedTime.Value.Year,
                selectedTime.Value.Month,
                selectedTime.Value.Day,
                updatedTime.Value.Hour,
                updatedTime.Value.Minute,
                updatedTime.Value.Second
            );
    }
}

---

When the user opens the DateTimePicker(Time step) or the TimePicker, which are bound to some value, and clicks directly the "Set" button, the pickers don't bind the displayed time value (pre-selected value). This behavior can be seen when the pickers have configured steps (e.g. Minute: "15", Year="10" etc.)

Steps To Reproduce

1. Open link - https://blazorrepl.telerik.com/GyupQQFv05vNPskh51
2. Open the TimePicker
3. Click the "Set" button, to set the pre-selected value

We are noticing that scrolling and dropping the minutes in the selection box is quite jumpy\jittery. We need to get close and then manually click on the desired minute to select it.

The behavior can be reproduced in the live demo if opened on a mobile device.