cc-input-date: init component

[pdesoyres-cc]

Context

For the logs page of the Console, we want to let the users choose the date range for which they want to see the logs.

For that, we need an input that lets them specify a date.

Date format

The component allows two formats:

• simple format: YYYY-MM-DD HH:mm:ss
• ISO format: YYYY-MM-DDTHH:mm:ss.SSSZ

The users can type a date in either the simple format or the ISO format.

As soon as a typed date respects one of the two formats it is automatically formatted with the simple format (no need to blur or to type Enter key).

As a developer, one can pass a value with either a Date, a string in ISO format, or a string in simple format.

milliseconds precision

The component keeps track of the milliseconds part when users provide a Date or a string in ISO format
Then, when the date is changed by editing the input using the simple format, users don't need to specify the milliseconds because it is not part of this format.
However, we don't want to lose the initial milliseconds precision.
The component will use the initial milliseconds part that has been stored initially to reconstruct a full date with milliseconds precision.

To be discussed

Should we consider this component as an atomic component? Or should we consider it as bound to the logs page and to be a very specialized component?

Inputs

Attributes/properties

Property	Type	Default value	Mandatory	Description
disabled	boolean	false	false	Whereas the input is disabled
inline	boolean	false	false	Whereas the input is inlined
label	string	null	true	The label of the input
hiddenLabel	boolean	false	false	Whereas the label should be visually hidden
max	string	null	false	Maximum date as ISO string
min	string	null	false	Minimum date as ISO string
name	string	null	false	Name of the input
readonly	boolean	false	false	Whereas the input should be in read only mode
required	boolean	false	false	Whereas the input is required
skeleton	boolean	false	false	Whereas the input should be in skeleton mode
value	string|Date	null	false	The input value as Date, string with ISO format or string with simple format
timezone	Timezone	UTC	false	The timezone

Slots

Name	Description
error	The error slot. When fed, a reddish focus ring is displayed around the internal native input
help	The help message to be displayed under the label

CSS custom property

Name	Type	Default value	Description
--cc-input-font-family	FontFamily	var(--cc-ff-monospace, monospace)	The font to be used for the input

Outputs

Event	Data type	Description
input	string	Whenever the value has changed after a user input
requestimplicitsubmit	``	Whenever the Enter key is hit

Note that, the input event is dispatched even if the input date is not valid:

• if the typed string is not a valid date, the event will contain the typed string.
• if the typed string is a valid date, the event will contain the date in ISO format.

Type Definitions

type Timezone = 'local' | 'UTC';

Public methods

• getValueAsDate(): returns the value as a Date or null if the input date is not valid.
• validate(): returns whereas the input is valid regarding:
  • input must be non-empty if the property required is true.
  • input must have a valid format (YYYY-MM-DD HH:mm:ss).
  • input must be higher than the property min.
  • input must be lower than the property max.