Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Calendar Picker

Date field (with calendar picker), also known as "date picker", provides single date entry with a text field or selection through a visual calendar element tied to the input.

Examples

Loading

Code

React

The calendar picker is another name for the <SingleInputDateField> with a calendar picker button. To enable the date picker feature, you must pass both a from<TIME> property (i.e., fromDate, fromMonth, etc.) and a to<TIME> property (i.e., toDate, toMonth, etc.) to the date field component.

See Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Input/Form components:

CSS variables for text-input
VariableDefault Core Theme Value
--text-input__background-color--disabledhex value: #d9d9d9--color-gray-lighter
--text-input__border-width2px
--text-input__border-width--disabled2px
--text-input__border-width--error3px
--text-input__border-colorhex value: #262626--color-base
--text-input__border-color--disabledhex value: #a6a6a6--color-gray-light
--text-input__border-color--errorhex value: #e31c3d--color-error
--text-input__border-color--error--inversehex value: #f7bbc5--color-error-lighter
--text-input__border-color--inversehex value: #000000--color-black
--text-input__border-radius--radius-default
--text-input__colorhex value: #262626--color-base
--text-input__divider-colorhex value: #a6a6a6--color-gray-light
--text-input__padding--spacer-1
--text-input__line-height1.2999999523162842
--text-input-currency-icon__line-height--text-input__line-height
--text-input-currency-icon__spacing20px

Form components

This component also makes use of form field styles, which can be customized by the following variables:

CSS variables for form
VariableDefault Core Theme Value

Guidance

When to use

  • Use the date picker for dates that have happened within the last year, in the future, or is relevant to selecting the day of the week.

When to consider alternatives

  • Don't use if users are entering a memorable date. Instead, use either single- or multi-input date fields.
  • Don't use if the date occurred in the distant past (like date of birth).

Usage

Allow users to have flexibility in entering the date, such as allowing one-digit numbers with or without "0" prior to the number, or entering a date with or without slashes to separate month, day, and year.

  • Example: "1" as well as "01" for a month or day.
  • Example: "05/18/2022" as well as "05182022".

Accessibility

  • These text fields should follow the accessibility guidelines for all text inputs.
  • Users will be able to enter a variety of date formats that automatically format to the correct date format of MM/DD/YYYY. This change happens once the form field loses focus. For example, a user enters a date as "4122020" and it changes to "04/01/2020" once focus leaves the date input.
  • Instructions are available make this more usable/accessible for assistive technology.

Component maturity

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.

Accessibility

  • Color

    Meets AA color contrast standards for accessibility and color blindness.
    Complete
  • Forced Colors Mode (FCM)

    While using FCM the components text is legible and improves readability.
    Complete
  • WCAG 2.1 Level AA Conformance

    All Axe checks for WCAG AA compliance have passed.
    Complete
  • Screen readers

    VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
    Complete
  • Keyboard navigation

    Component is fully navigable with a keyboard.
    Complete

Code

  • Storybook

    Component has stories to cover all defined props.
    Complete
  • Responsive

    Component designed to work in all responsive breakpoints.
    Complete
  • Spanish translations

    Includes Spanish translations for default text content.
    Complete

Tokens

  • Code

    Tokens implemented in code.
    Complete
  • Design

    Tokens implemented in the Sketch.
    Complete