From 30a2a49c77099256d4d038b3870fda97246f9c3b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 25 Mar 2021 13:06:20 +0200 Subject: [PATCH 1/2] kb(date-input):Select AM/PM by pressing A or P on keyboard --- .../date-input-select-am-pm-on-keypress.md | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 knowledge-base/date-input-select-am-pm-on-keypress.md diff --git a/knowledge-base/date-input-select-am-pm-on-keypress.md b/knowledge-base/date-input-select-am-pm-on-keypress.md new file mode 100644 index 0000000000..2015795919 --- /dev/null +++ b/knowledge-base/date-input-select-am-pm-on-keypress.md @@ -0,0 +1,134 @@ +--- +title: Select AM/PM by pressing A or P on keyboard +description: How to select AM/PM by pressing A or P on keyboard in TimePicker, DateTimePicker and DateInput +type: how-to +page_title: Select AM/PM by pressing A or P on keyboard +slug: date-input-kb-select-am-pm-on-keypress +position: +tags: +res_type: kb +--- + +## Environment + + + + + + + +
ProductTimePicker for Blazor, DateTimePicker for Blazor, DateInput for Blazor
+ + +## Description + +When typing in time in the TimePicker/DateTimePicker (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. + +When using the DateInput component and using format "hh:mm:ss tt" the UI part allows me to edit the hour minute seconds correctly, but the AM / PM is not editable by typing A or P. Only changes the AM/PM by using up arrow and down arrow on keyboard. + +Any way to make the AM/PM change the way the hh mm ss does by directly entering A or P? + + +## Solution + +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. + +In order to change AM/PM by pressing A or P on keyboard you can get the input events such as keydown. They are not built-in in the component, because exposing so many events like that will be a major performance hit for a small percentage of people who need them. However, you can capture them as they bubble up the DOM in a parent element, as described in this article - [Capture input keyboard events]({%slug inputs-kb-handle-keyboard-events%}). + +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). + + +>caption TimePicker - Select AM/PM by pressing A or P on keyboard + +````CSHTML +@* Press A or P on keyboard to select AM or PM*@ + +@TheTime +
+ + + + +@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); + } + } +} +```` + + + +>caption DateTimePicker - Select AM/PM by pressing A or P on keyboard + +````CSHTML +@* Press A or P on keyboard to select AM or PM*@ + +@TheDateTime +
+ + + + +@code{ + DateTime TheDateTime { get; set; } = DateTime.Now; + + async Task OnKeyDownHandler(KeyboardEventArgs e) + { + if (e.Key.ToLowerInvariant() == "p" && TheDateTime.Hour < 12) + { + await Task.Delay(20); + TheDateTime = TheDateTime.AddHours(12); + } + if (e.Key.ToLowerInvariant() == "a" && TheDateTime.Hour > 12) + { + await Task.Delay(20); + TheDateTime = TheDateTime.AddHours(-12); + } + } +} +```` + + + +>caption DateInput - Select AM/PM by pressing A or P on keyboard + +````CSHTML +@* Press A or P on keyboard to select AM or PM*@ + +@TheTime +
+ + + + +@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); + } + } +} +```` + From 65fefab9031eb607072501197c97fc7c4b37734b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 26 Mar 2021 19:38:13 +0200 Subject: [PATCH 2/2] chore(dateinput - select-am-pm): minor fix --- knowledge-base/date-input-select-am-pm-on-keypress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/date-input-select-am-pm-on-keypress.md b/knowledge-base/date-input-select-am-pm-on-keypress.md index 2015795919..898ec8d614 100644 --- a/knowledge-base/date-input-select-am-pm-on-keypress.md +++ b/knowledge-base/date-input-select-am-pm-on-keypress.md @@ -33,7 +33,7 @@ Any way to make the AM/PM change the way the hh mm ss does by directly entering 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. -In order to change AM/PM by pressing A or P on keyboard you can get the input events such as keydown. They are not built-in in the component, because exposing so many events like that will be a major performance hit for a small percentage of people who need them. However, you can capture them as they bubble up the DOM in a parent element, as described in this article - [Capture input keyboard events]({%slug inputs-kb-handle-keyboard-events%}). +In order to change AM/PM by pressing A or P on keyboard you can get the input events (such as keydown) by capturing them as they bubble up the DOM in a parent element, as described in this article - [Capture input keyboard events]({%slug inputs-kb-handle-keyboard-events%}). 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).