Completed
Last Updated: 23 Oct 2023 08:26 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
I retrieve the value of the Format parameter from an async method. When I select a time from the popup the format selected value is not rendered in the UI, and the Format is incorrect - switches to MM/dd/yyyy.
Completed
Last Updated: 27 Oct 2021 08:49 by ADMIN
Release 2.28.0
Created by: Shannon
Comments: 1
Category: TimePicker
Type: Bug Report
1

The TimePicker OnChange event fires to confirm a complete user action. From this point of view, the Set button in the component's dropdown should fire the event as well.

https://docs.telerik.com/blazor-ui/components/timepicker/events

The OnChange event represents a user action - confirmation of the current value. It fires when the user presses Enter in the input, or when the input loses focus.

The ValueChanged event fires upon every change (for example, keystroke) in the input, and upon clicking the Set or Now buttons in the dropdown.
Completed
Last Updated: 04 May 2022 08:01 by ADMIN
Release 3.3.0

On the DateTimePicker, when the "Set" button is clicked, the focus is given to the DateTimePicker field, so when the user clicked outside the component, the OnChange event is fired.

But the behaviour of the TimePicker is different. Indeed, after clicking on the "Set" button the TimePicker field does not get the focus, so the user can't click outside of it to fire the OnChange event.

The following code allows to manually set the focus on each ValueChanged event, but because of it the two-way binding can't be used. This code allows the TimePicker to have the same behaviour than the DateTimePicker :


<TelerikTimePicker @ref="@timepicker" Value="MyDate" OnChange="MyDateChanged"
    ValueChanged="@((DateTime d) => { MyDate = d; timepicker.FocusAsync(); })"></TelerikTimePicker>

@code {
    private DateTime MyDate { get; set; }
    private TelerikTimePicker<DateTime> timepicker;

    public void MyDateChanged(object theUserInput)
    {
        Console.WriteLine("Event OnChange fired");
    }
}

---

ADMIN EDIT

Reproducible

1. Go to the TimePicker demo https://demos.telerik.com/blazor-ui/timepicker/overview
2. open the popup
3. set a time with the Set button

**Note**: same goes for the Cancel button

### Current

focus goes somewhere (maybe on the body)

### Expected

focus goes to the input of the time picker

---

Completed
Last Updated: 31 Oct 2022 13:01 by ADMIN
Release 3.7.0 (09 Nov 2022)
Created by: Richard
Comments: 3
Category: TimePicker
Type: Feature Request
26

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

 

---