Date recurrence pickers allow users to define and select a recurrence pattern based on a period-based recurrence type.

The date recurrence picker is an input component that provides access to a dialog where the user can define and then select a periodic recurrence pattern as the basis for the repeated occurrence of an event or action. The resulting value is Temenos-specific.

Date recurrence pickers use a compact design to improve usability on various devices. The picker's dialog has several UI variations, each of which corresponds to one of the following supported recurrence types:

  • Daily
  • Weekly
  • Monthly
  • Yearly
  • Defined
  • Advanced

The date frequency picker is based on our text field component. All recurrence types share a similar anatomy, which is illustrated using the Daily frequency type.

  1. Date recurrence picker input component (Text Field)
    1. Container
    2. Text label / Dynamic data
    3. Trailing icon – Click to display dialog
  2. Date recurrence picker dialog
    1. Card / Container
    2. Dialog label
    3. Reset button
    4. Close button
    5. Recurrence type
    6. Recurrence pattern
    7. Confirmation box
    8. Confirmation message
    9. Save recurrence CTA button

Daily – Recur either after an integral number of days, or every business day (Monday-Friday).

Weekly – Recur after an integral number of weeks on selected days of the week.

Monthly – Recur after an integral number of months either on a selected day of the month or on an ordinal instance of a selected day of the week.

Yearly – Recur after an integral number of years either on a selected date in the year or on an ordinal instance of a selected day of the week in a selected month of the year.

Defined – Choose from a number of pre-defined recurrence patterns.

Advanced

Date recurrence pickers are available in normal (medium) and dense (small) sizes. Date recurrence picker size is based on an integral number of nudges, where 1 nudge is 8px (img).

  1. Small – Based on a height of 5 nudges (40 px)
  2. Medium – Based on a height of 7 nudges (56 px)

Date recurrence pickers are interactive components that respond visually to user actions and system-initiated events.

The layout of the date recurrence picker dialog changes as different recurrence types are selected. See Recurrence types for details.

Date recurrence pickers display a plain text description of the date recurrence pattern in the confirmation box. The plain text description is constructed from the values of other elements on the picker and is updated dynamically as these values change.

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: