Split date input component (with subfields for each part)

[rolfsmeds]

Description

An alternative to DatePicker composed of 3 sub-fields for day, month and year, with support for text entry, dropdown selection and spinner (up & down arrows) for setting the value in each.

Also see #7104

Motivation

The DatePicker component can be inconvenient for entering dates that

• Are known exactly (so the calendar doesn't really provide any benefit)
• Can be far from the current or initial month in the calendar
  Dates of birth are a common example of such dates.

Acceptance criteria

• Split-field similar to DateTimePicker
• Configurable order of sub-fields (e.g. yyyy-mm-dd, dd-mm-yyyy, mm-dd-yyyy)
  • Default based on locale
• Can be configured to render sub-fields as either
  • Combo-boxes with autogenerated values, or
  • Spinners (up & down arrows increment/decrement)
  • The year field only supports dropdown if either min & max are set, or a specific list of years is provided
• Configurable to auto-increment to the next sub-field after filling in valid value in current sub-field
• Clear button at the end (non-focusable, with Esc as kbd-equivalent)
• i18n:
  • Sub-field placeholders
  • Sub-field aria-labels that are automatically prefixed with root label/aria-label

Possible later enhancements

• Support for month names in month dropdown
• Style variant that looks like a single unitary field (with separator chars instead of gaps between subfields)
• Support for partial dates (yyyy, yyyy+mm, mm, mm+dd etc), with some way of providing a way for the field to fill in missing parts (so that it can still return a full date value)

General criteria

• APIs reviewed

• Design

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)

[knoobie]

Configurable order of sub-fields (e.g. yyyy-mm-dd, dd-mm-yyyy, mm-dd-yyyy)

Should it also support yyyy as well as yyyy-mm and mm-yyyy? I saw multiple request for those fields in the community over the years.

[rolfsmeds]

Should it also support yyyy as well as yyyy-mm and mm-yyyy? I saw multiple request for those fields in the community over the years.

Yeah, a year-only/month-only/year+month date picker is requested every few months. I thought about that, since this could actually support it way better than DatePicker, but decided to leave it out of the spec for now (but forgot to add it to the potential future enhancements).

Of course the field still needs to return a full date value, so then we'd either need something like the referenceDate in DatePicker, or some other means of defining how to fill in the blanks. (Suggestions welcome)

[knoobie]

Support for partial dates might require a custom return / field type where month and days are allowed to be zero.. with that it might be kinda "easy".. looking at JavaScript Date or the new PlainDate it requires proper ranges from 1+ for both fields.. that rules them out.. same for the Java side.. at least there we have Year, YearMonth and LocalDate.. so technically there could be three different classes using the same web component with a different "flag".

[rolfsmeds]

Eh, seems a bit niche to me. I'd rather just support full dates, and if you absolutely need to return a partial value, you can easily roll your own 2-field component.