Unplanned
Last Updated: 22 May 2024 11:16 by Philip

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
Duplicated
Last Updated: 15 May 2024 12:34 by Gert
Created by: Johann
Comments: 2
Category: TimePicker
Type: Feature Request
3
Do you add a TimeDurationPicker for Blazor like in kendo for jQuery in one of the next versions?
Declined
Last Updated: 23 Jan 2024 18:13 by ADMIN
Created by: Joe
Comments: 4
Category: TimePicker
Type: Bug Report
4
The up/down arrows going up/down works great, but when you are typing the time in directly, it has issues. It seems that if I type the time for hours 2-12, it works exactly as I'd expect. If I type 215, it yields 2:15, if I type 1130, it yields 11:30. But if I type 130, it yields 3:00.
Unplanned
Last Updated: 15 Jan 2024 15:15 by ADMIN
The behavior occurs only when using "hh" format for the hours section. For example: "hh:mm:ss" of "hh:mm". In this case, typing "01" in the hour segment should auto-switch the focus to the minutes segment as this is a valid and complete hour value. However, the focus remains on the hours segment.

For reference, testing the same input ("01") with format "HH:mm" or "h:mm", the focus is moved to the minutes.

The behavior affects the TimePicker and the DateTimePicker components.

Reproduction: https://blazorrepl.telerik.com/cyuFFpFf06hDpzgn20.
Unplanned
Last Updated: 04 Jan 2024 16:15 by Sergio
Created by: Muhammad
Comments: 1
Category: TimePicker
Type: Feature Request
5

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.

Duplicated
Last Updated: 21 Dec 2023 11:20 by ADMIN
Created by: Åke
Comments: 1
Category: TimePicker
Type: Feature Request
0

I would like a clockpicker something like screenshot below.

It´s easy and fast to use

 

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.
Unplanned
Last Updated: 30 Aug 2023 07:07 by ADMIN
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.
Unplanned
Last Updated: 04 Jul 2023 13:25 by Kenneth
When using the spinners in the TimePicker popup component, either by itself or inside of a DateTimePicker, changes to the spinner values for hours, minutes, seconds, and AM/PM are not announced by the screen reader.
Unplanned
Last Updated: 02 Jun 2023 13:35 by Nag

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.

 

Duplicated
Last Updated: 28 Feb 2023 16:32 by ADMIN

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

Unplanned
Last Updated: 01 Nov 2022 08:08 by Niko

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

---

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

 

---

Duplicated
Last Updated: 17 Oct 2022 10:14 by ADMIN
Created by: Zachary
Comments: 1
Category: TimePicker
Type: Bug Report
12

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

Unplanned
Last Updated: 29 Sep 2022 11:13 by ADMIN
Created by: Joe
Comments: 5
Category: TimePicker
Type: Feature Request
8

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

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: 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.
Declined
Last Updated: 16 Feb 2021 07:59 by ADMIN
Created by: Philip
Comments: 3
Category: TimePicker
Type: Bug Report
0

When setting time from AM/PM vice-versa (after setting hour and minute), the time is reset.

 

Observed in the demo also;

https://demos.telerik.com/blazor-ui/timepicker/overview

 

This means that the user needs to set AM/PM first, which doesn't follow, as the AM/PM is the right-most UI element.

---

ADMIN EDIT

This is a configuration setup, and not a bug - see the discussion below on the Min and Max features.

---

Unplanned
Last Updated: 01 Feb 2021 08:40 by ADMIN
Created by: David
Comments: 0
Category: TimePicker
Type: Feature Request
1
It might not always be obvious for desktop users that they can drag the spinners to set the desired value and having up/down buttons above/below the spinner might help them.
Duplicated
Last Updated: 25 Oct 2020 16:05 by ADMIN
Created by: Mark
Comments: 1
Category: TimePicker
Type: Feature Request
0
The TimePicker is too precise for 99% of the events that are scheduled.  Our users are requesting that we find a way to make the spinner less precise, say 5 minute increments.  If they need an exact minute they will just type in the value and not use the picker.  As of now they are saying that they will not use the spinner as it they can easily pick the wrong time.