Date period pickers allow users to define a period during which an event should occur.
A Date Multi Period Picker is an input component that manages a set of date-period values (of the kind managed by Date Period Picker).
The date-period values are represented as either (a) as a group of removable chips (thus allowing removal of
individual values the field directly by clicking the relevant chip's delete ("x") icon), or (in textOnly mode)
(b) as a comma-separated list of formatted date-period values.
The field's "add" button opens an extended version of Date Period Picker's edit dialog in which (a) there is an additional "Add another" checkbox (allowing the user to keep the dialog open after each "commit"), and (b) the "commit" operation (i) checks that the new date-period value is not the same as another already in the set (reporting a validation error if so, else (ii) adds the new value to the set otherwise).
The field's value is a comma-separated list of date-period-picker value(s) - e.g. 2D,6W. On update,
this value (and the corresponding chips/formatted values) are automatically reordered so that the individual date-period
values appear in ascending order of logical duration.
Date Multi Period Picker supports the following attributes/properties of Date Period Picker: periodType, dialogSaveButtonLabel, descriptionPrefix, periodMinLength, periodMaxLength, defaultPeriod
(with semantics / interpretation as per Date Period Picker)
Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
Related components: