This is a migrated thread and some comments may be shown as answers.

Allow Selecting AM/PM by pressing A or B on keyboard

5 Answers 55 Views
TimePicker
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Veteran
Iron
Andrew asked on 12 Feb 2021, 09:00 PM

When typing in time in the timepicker (enter hours,enter mins, arrow up/down for AM/PM) it would be nice if I could select AM or PM by pressing A or P on the keyboard also.

Is there anyway this can be added?

 

5 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 13 Feb 2021, 01:20 PM

Hello Andrew,

While A and P might be very common symbols, there are many other symbols that might be used in different countries and cultures. Thus, the component cannot track all such possible combinations, and it exposes the Up and Down Arrows as options to change the time segments, including the AM/PM indicator.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andrew
Top achievements
Rank 1
Veteran
Iron
answered on 13 Feb 2021, 02:13 PM

Even it is was just a starting with filter or free entry for that field

Is there anyway for me to  add some type of feature using a keypress even?

 

The issue I am having is some people who just type in the time do not like using the arrow keys

 

 

 

0
Marin Bratanov
Telerik team
answered on 13 Feb 2021, 02:14 PM

Hello Andrew,

You can get input events such as keydown as described in this KB article: Capture input keyboard events. So, if you detect an A or P key you could change the Value as desired (e.g., add or subtract 12 hours depending on the current hours).

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andrew
Top achievements
Rank 1
Veteran
Iron
answered on 16 Feb 2021, 01:30 PM
Is does not look like the timepicker has these events available I tried onkeydown and onkeypress and got an error for both 
0
Accepted
Marin Bratanov
Telerik team
answered on 16 Feb 2021, 02:10 PM

Hi Andrew,

They are not built-in, because exposing so many events like that will be a major performance hit for a small percentage of people who need them.

Thus, you must capture them as they bubble up the DOM in a parent element, as described in the article I linked: https://docs.telerik.com/blazor-ui/knowledge-base/inputs-handle-keyboard-events.

Here's an example I made for you so you can use as base for further development:

@TheTime
<span @onkeydown="@OnKeyDownHandler">
    <TelerikTimePicker Format="hh:mm:ss tt" @bind-Value="@TheTime"></TelerikTimePicker>
</span>
@code{
    DateTime TheTime { get; set; } = DateTime.Now;

    async Task OnKeyDownHandler(KeyboardEventArgs e)
    {
        if(e.Key.ToLowerInvariant() == "p" && TheTime.Hour < 12)
        {
            await Task.Delay(20);
            TheTime = TheTime.AddHours(12);
        }
        if (e.Key.ToLowerInvariant() == "a" && TheTime.Hour > 12)
        {
            await Task.Delay(20);
            TheTime = TheTime.AddHours(-12);
        }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TimePicker
Asked by
Andrew
Top achievements
Rank 1
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Andrew
Top achievements
Rank 1
Veteran
Iron
Share this question
or