Skip to main content

Date range

Date range in Storybook

Usage​

Overview​

The date range picker enables users to specify start and end dates. Users can select these dates from a calendar or enter them manually. This component is used in insurance applications to specify a range of dates for tasks such as:

  • Selecting an insurance policy's coverage period
  • Filtering claims data

When to use​

For selecting a period with a distinct start and end date.

When not to use​

For selecting a single date. In this case, use the date picker component.

Formatting​

Anatomy​

The date range component

The date range component consists of the following elements:

  1. Start date
  2. All intervening dates
  3. End date

Both the start date and the end date include a field where users can manually input a date. There is also a calendar icon that, when clicked, triggers a dropdown menu for date selection.

Date format​

The format of the date displayed in the date picker depends on the user's locale. This means that the date format will vary based on the user's location and language settings.

For example, in the United States, the date format is typically MM/DD/YYYY, while in many European countries, the format is DD/MM/YYYY.

The date format is shown as a placeholder within the date picker to assist the user as they enter the date. This ensures that the format remains visible throughout the input process.

Content​

General writing guidelines​

  • Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
  • Use present tense verbs and active voice in most situations.
  • Use common contractions to lend your copy a more natural and informal tone.
  • Use plain language. Avoid unnecessary jargon and complex language.
  • Keep words and sentences short.

Include a label​

Label the date range picker with clear, descriptive text. This label must communicate its purpose and the specific type of year being selected.

Labels appear above the date input field, are left-aligned, and use sentence case.

Do position a permanent label outside the field.
Don't use placeholder text as replacement for label.

Behaviors​

States​

The date range picker component behaves like an input field, with the same interactive states.

Interactions​

Mouse​

Users can interact with this element by clicking in the area inside border.

Image illustrating a user clicking inside the date range picker field

Keyboard​

The date picker is expanded and collapsed with Spacebar. Users navigate through the options using the arrow keys and select by means of the Spacebar or Enter key.

A calendar widget appears when the user tabs to the date picker input field. The current date is highlighted and keyboard-only users can enter the date manually here. Users can also place keyboard focus on the widget by pressing the down arrow key when it is expanded. Navigate through the calendar with the arrow keys. 'Previous', 'Month', 'Year', and 'Next' buttons are focusable using the Tab key when the widget is open.

Screen reader​

Users are informed of the pre-populated date value when they tab to the date picker input field, and that this value is currently selected. The date can be entered manually from this input field. While focus remains on the pre-populated date, a calendar widget is also available. Users can also move focus into the widget by pressing the down arrow key. Navigation through the calendar portion of the widget is accomplished using the arrow keys, and the value currently in focus is voiced by screen readers through a WAI-ARIA aria-label attribute. The 'Previous', 'Month', 'Year', and 'Next' buttons are focusable using the Tab key when the widget is open. React date picker does not currently enable keyboard navigation to the 'Today' link.

Accessibility​

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.

When using this component, ensure the labels clearly communicate which dates the user needs to input or select.