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.

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

The TimePicker TimeView resets the date portion of the component Value to today. This does not happen when typing in the DateInput.

The problem is with start-end validation where the start Value gets ahead of the end Value, even if the time parts are valid.

A possible workaround is to use the TimePicker ValueChanged event to override the date part to its previous value, or to set a fixed date value that is the same for the start and end TimePickers.

Description

TimePicker bound to a non-nullable DateTime property. User input is marked as invalid, when they change only part of the default TimePicker value.

Steps To Reproduce

1. Run the following REPL example: https://blazorrepl.telerik.com/GpEUOflI50gehA9B54
2. Focus the hour part of the input and type in a number, e.g., 3
3. Blur the TimePicker

Actual Behavior

On beginning to type, the k-invalid class is applied to the TimePicker element. When the use clicks away, the current input value (e.g., 3:00 AM) is replaced with the default value (12:00 AM).

If you type the whole value (e.g., 3:45 AM) and then click away from the component, the k-invalid class is removed and the value is accepted as valid.

Expected Behavior

The k-invalid class should not be applied to the TimePicker in the scenario described above. The used should be able to change only the hour part of the value, or the minutes, without having to type in the whole value.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

8.1.1

Description

The issue is exhibited in the following scenario: a TimePicker bound to a non-nullable DateTime field that is not initialized.
On attempting to change the default time value (only the hours, or the minutes) the TimePicker's validation triggers and after blurring the input shows the default value (12:00 AM). The validation is circumvented by modifying The AM/PM portion of the value. It happens only if the TimePicker uses its default format and only if you type the "A" or "P" letters with the keyboard. Changing AM to PM with the arrow keys does not circumvent the validation.

Steps To Reproduce

Run this REPL example: https://blazorrepl.telerik.com/QJaUFDFw05LBs4Fe22

1. Click the AM part of the value of the first TimePicker.
2. Type "P"

Actual Behavior

The validation is circumvented, because DateValue is updated from 1/1/0001 to the current date.
Re-run the example and try the same with the other TimePicker (which has Format set), as well as with the DateTimePicker.

Expected Behavior

The behavior should be consistent across the board in the different picker components and should not be dependent of the current format.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

When the initial value is NULL and AllowCaretMode is enabled, I’m unable to enter values of 10 or higher in the hour, minute, or second fields. As I start typing, only the first digit is accepted, which prevents the input of two-digit numbers.

Also, when the time control gains focus after switching from another control, the entire text is automatically selected. As a result, typing immediately replaces the entire value.

By design, when the TimePicker (and other date/time pickers) is bound to a non-nullable value, pressing the clear button clears the input only and sets the component in invalid state. In this case, ValueChanged and OnChange events do not fire and the component keeps its old value until a new valid value is entered.

I want to catch when the user presses the clear button. Instead of clearing the input, I want to reset the value to 00:00:00, so the component is still in a valid state.

===

ADMIN EDIT

===

For the time being, you can disable the built-in clear button. Instead, add a custom button/span, use CSS to position it inside the picker's input and handle its onclick event: https://blazorrepl.telerik.com/QTabvxPz46eLPVvJ00.

This request can potentially be related to providing an option to also detect when the user clears the value via the keyboard.

The request applies to all pickers (DateInput, DatePicker, DateRangePicker, DateTimePicker).

I would like a clockpicker something like screenshot below.

It´s easy and fast to use

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;
        }
    }
}

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.

Since version 4.0.0, when you initialize a time picker to start with the value of 12:00AM it will display the format instead of the actual value (for example hh:mm:ss AM, where 12:00:00 AM should have been displayed).

Demo

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
            );
    }
}

---

The "SET" button is not visible when we open it and we are on the middle of the page: the button appears outside of the bottom of the page. So I have to close it, put the field to the top of the page, then open it again.

---

ADMIN EDIT

Some workaround, especially if most of your user base is on the same small form factor, is to use a bit of CSS to change the position of the dropdown to stick to the top of the viewport - this could potentially make it fit into screens as small as about 350x400px.

CSS

    /*you can tweak the media query to target only the resolutions you want*/
    @media(max-width: 500px) {
        .top-aligned {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0%);
            /* you can also try translate(-50%, 50%) for a centered effect which may be better suited for laptop/tablet size */
        }
    }

Component

Selected time: @selectedTime
<br />

<TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
                       Format="dd MMM yyyy HH:mm:ss" Width="250px"
                       PopupClass="top-aligned">
</TelerikDateTimePicker>

@code {

    private DateTime? selectedTime = DateTime.Now;
    public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
    public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
}

---

The TimePicker scroll wheels are janky and difficult to use on mobile.  They tend to jump around while scrolling with touch input.

Is this on the roadmap for improvement?  We are working on a project and need to decide whether to roll our own TimePicker in the meantime.

(Note: this is an issue on both client/server side, but I am forced to choose one.)

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