🚀 - 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"

In specs below I will use FF option.

Specifications of the new feature:

• Supported Time masks: "HH FF", "HH:MM FF", "HH:MM:SS FF", "HH:MM:SS.MSS FF"

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

• 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| FF or HH:MM |FF), 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.