Date period pickers allow users to define a period during which an event should occur.

The date period picker is an input component that provides access to a dialog where the user can define a period during which a known event or action is expected to occur. The period is specified as an integral number of days, weeks, months, or years. The resulting value is Temenos-specific.

The date period picker uses a compact design to improve usability on various devices. This picker has no variations.

1. Date period picker input component (Text Field)
   1. Container
   2. Text label / Dynamic data
   3. Trailing icon – Click to display dialog
2. Date period picker dialog
   4. Card / Container
   5. Dialog label
   6. Reset button
   7. Close button
   8. Number of period units
   9. Period type – select days, weeks, months or years
   10. Set Period CTA button

Sizing is based on an integral number of nudges, where 1 nudge is 8px (). Date frequency pickers are available in one size only, based on a height of 7 nudges (56 px).

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:

• Date Frequency Picker
• Date Recurrence Picker
• Text Field