Components

Date picker

A date picker helps users select a single date.

mm/dd/yyyy
<div class="usa-form-group">
  <label class="usa-label" id="appointment-date-label" for="appointment-date"
    >Appointment date</label
  >
  <div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
  <div class="usa-date-picker">
    <input
      class="usa-input"
      id="appointment-date"
      name="appointment-date"
      aria-labelledby="appointment-date-label"
      aria-describedby="appointment-date-hint"
    />
  </div>
</div>

Guidance

When to use the date picker component

  • Scheduling. When users need to schedule or record an event and benefit from the context of a calendar.
  • When the day of the week is important. When knowing the day of the week helps users choose a specific date.

When to consider something else

  • Familiar dates. When asking users for a date they know well, or can look up without using a calendar (like a birthday), use memorable date fields.
  • When the day of the week is irrelevant. If there’s no benefit to knowing the day of the week for a particular date, consider memorable date fields.

Usability guidance

  • Describe the date format. Provide a hint of mm/dd/yyyy to help users enter the proper date format if they opt not to use the date picker.

Accessibility

  • Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
  • Avoid auto-submission. Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.

Using the date picker component

  • Properties. The following properties modify component functionality. These properties can be set or adjusted at any time before or after initialization in order to have an effect.

    Property Element Description

    data-min-date

    .usa-date-picker

    The date picker will not allow a date selection before this date. The date should be in the format YYYY-MM-DD. Typing in an earlier date will cause native form validation error. A default min date or 0000-01-01 is used as a default.

    data-max-date

    .usa-date-picker

    The date picker will not allow a date selection after this date. The date should be in the format YYYY-MM-DD. Typing in a later date will cause native form validation error. There is no default maximum date.

    data-range-date

    .usa-date-picker

    The date picker will show a range selection from the range date. The date should be in the format YYYY-MM-DD.

  • Initialization properties. The following properties update the component during initialization. These properties must be set before the component is initialized in order to have an effect.

    Property Element Description

    required

    input

    The date picker component will be required in terms of native form validation.

    disabled

    input

    The date picker component will be disabled/readonly. You can re-enable by executing the enable procedure on the component.

    data-default-value

    .usa-date-picker

    The date picker input will set this value if it is a valid date. The date should be in the format YYYY-MM-DD.

  • Procedures. The following static procedures update the component after initialization. These are in addition to the primary methods referenced in the JS customization documentation.

    Procedure Parameters Description

    enable

    .usa-date-picker element

    The date picker component will be enabled.

    disable

    .usa-date-picker element

    The date picker component will be disabled / read-only.

Date picker settings

This component has no settings.

Date picker variants

This component has no variants.

Package

  • Package usage: @forward "usa-date-picker";
  • Dependencies: uswds-fonts, usa-icon, usa-input