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

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).

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.

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

---

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