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

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

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

  • Daily
  • Weekly
  • Monthly
  • Defined

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

  1. Date frequency picker input component (Text Field)
    1. Container
    2. Text label / Dynamic data
    3. Trailing icon – Click to display dialog
  2. Date frequency picker dialog
    1. Card / Container
    2. Dialog label
    3. Reset button
    4. Close button
    5. Next date – Date of next occurrence of this frequency pattern
    6. Frequency type
    7. Frequency pattern
    8. Confirmation box
    9. Confirmation message
    10. Save frequency CTA button

Daily – Either every day, or every business day (Monday-Friday).

Weekly – A specified integral number of weeks.

Monthly – Either twice a month, or a specified integral number of months on a specified day of the month.

Defined – Choose from a number of pre-defined frequency patterns or provide your own using the definedOptions property.

Date frequency pickers are available in normal (medium) and compact (small) sizes. Date frequency 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)

The date frequency picker is an interactive component that responds visually to user actions and system-initiated events.

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

Date frequency pickers display a plain text description of the date frequency 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.