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

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 ((