๐ - `Time`, `DateTime` support AM/PM time formats including input of 'am'/'pm'
mduft opened this issue ยท 3 comments
Which package(s) are relevant/related to the feature request?
@maskito/kit
Description
Currently only 24 hour format works out of the box.
I noticed that there is a possibility to override the max values for individual segments, but I still cannot enter 'am' or 'pm' in the input field.
Research
While researching different fields for time entry I was able to find two different approaches.
The first is to focus on a specific segment and edit it further. The second is when you can select in a separate am/pm field.
First example: https://mui.com/x/react-date-pickers/adapters-locale/#with-luxon
Second example: https://m3.material.io/components/time-pickers/overview#453a1694-0037-45f8-9421-8899bde1b6ea
We must define options for mask:
"HH:MM TT"
(https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings#lowercase-seconds-f-fraction-specifier)"HH:MM FF"
(https://vaadin.com/docs/latest/components/time-picker)"HH:MM AM/PM"
HH:MM AA
(https://angular.dev/api/common/DatePipe?tab=usage-notes) ๐ฅ
In specs below I will use A
option.
Specifications of the new feature:
-
Supported
Time
masks:"HH AA"
,"HH:MM AA"
,"HH:MM:SS AA"
,"HH:MM:SS.MSS AA"
-
In the initial state, as long as the user has not entered anything, there will be
AM
in the focused input field. If the input field is empty and out of focus, it will beempty
. -
If the cursor is within
AM/PM
, theup-down arrows
will changeAM
toPM
and vice versa. -
When the cursor is at the end of numeric time segments (
HH:MM| AA
orHH:MM |AA
), pressinga/A
will exposeAM
, pressingp/P
will exposePM
. -
AM
andPM
can be erased if necessary. If the cursor is withinAM/PM
, then pressingbackspace
will erase the entireAM
/PM
segment. -
01
โ minimum (including) possible value for hours;12
โ maximum (including) possible value for hours -
If
AM
/PM
was erased, and user triggers blur of textfield => textfield should be padded withAM
postfix
Is there any progress on this feature?
Thanks for the great work! The lib looks really promising.
@ColinFrick
Unfortunately, this feature is still part of our backlog ((