Skip to main content

Date Range Picker

A date range picker helps users select a range between two dates.


Default

Component Preview

mm/dd/yyyy
mm/dd/yyyy

Component Code

<div class="usa-date-range-picker">
  <div class="usa-form-group">
    <label class="usa-label" id="event-date-start-label" for="event-date-start">Event start date</label>
    <div class="usa-hint" id="event-date-start-hint">mm/dd/yyyy</div>
    <div class="usa-date-picker">
      <input
        class="usa-input"
        id="event-date-start"
        name="event-date-start"
        aria-labelledby="event-date-start-label"
        aria-describedby="event-date-start-hint"
      />
    </div>
  </div>
  <div class="usa-form-group">
    <label class="usa-label" id="event-date-end-label" for="event-date-end">Event end date</label>
    <div class="usa-hint" id="event-date-end-hint">mm/dd/yyyy</div>
    <div class="usa-date-picker">
      <input
        class="usa-input"
        id="event-date-end"
        name="event-date-end"
        aria-labelledby="event-date-end-label"
        aria-describedby="event-date-end-hint"
      />
    </div>
  </div>
</div>


Guidance

When to use the date range 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

When the day of the week is irrelevant.
If there's no benefit to knowing the day of the week for a date or range, 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.
Always allow a user to type in the date manually.
Usability testing suggests some people prefer manually typing the date rather than using the calendar picker. Whenever possible, keep the keyboard active so people can enter in the date information without having to use the picker.

Accessibility guidance

Test the date range picker component in your own project.
USWDS tested the date range picker component for accessibility. You should test your implementation, too.
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.

USWDS Documentation

For more guidance, view the USWDS Date Range Picker Component Documentation.



Settings

This component has no settings.



Variants

This component has no variants.

Looking for U.S. government information and services?
Visit USA.gov