🚀 - `Time`, `DateTime` support AM/PM time formats including input of 'am'/'pm'

[mduft]

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.

[KrollikRoddzer]

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:

1. "HH:MM TT" (https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings#lowercase-seconds-f-fraction-specifier)
2. "HH:MM FF" (https://vaadin.com/docs/latest/components/time-picker)
3. "HH:MM AM/PM"
4. 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"

• If the cursor is within AM/PM, the up-down arrows will change AM to PM and vice versa.

• When the cursor is at the end of numeric time segments (HH:MM| AA or HH:MM |AA), pressing a/A will expose AM, pressing p/P will expose PM.

• AM and PM can be erased if necessary. If the cursor is within AM/PM, then pressing backspace will erase the entire AM / 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 with AM postfix~~

• ~~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 be empty~~

UPDATE: last features should not be built-in ones and they could be achieved via maskitoAddOnFocusPlugin / maskitoRemoveOnBlurPlugin or Placeholder

[ColinFrick]

Is there any progress on this feature?

Thanks for the great work! The lib looks really promising.

[nsbarsukov]

@ColinFrick Unfortunately, this feature is still part of our backlog ((