Skip to main contentCarbon Design System

Date picker

Date and time pickers allow users to select a single instance or range of dates and times.

Overview

Date pickers allow users to select past, present, or future dates. The kind of date you are requesting from the user will determine which date picker (simple or calendar) is best to use. A time picker helps users select a specific time. You can customize the time picker’s format depending on location or need.

When to use

  • When asking the user for an exact, approximate, or memorable date or time.
  • For scheduling tasks.

Variants

VariantPurpose
Simple date inputUse if the date can be remembered by the user easily, such as a date of birth, and they don’t need a calendar to anticipate the dates. It consists only of input fields.
Calendar pickerUse a calendar picker (single or range) when the user needs to know a date’s relationship to other days or when a date could be variable. The user can view and pick dates from a calendar widget or manually type them in the text field.
Time pickerUse when asking the user to input a specific time.

Live demo

CodeSandbox React Angular Vue Web Components 


    <DatePicker dateFormat="m/d/Y" datePickerType="simple">

      <DatePickerInput

        id="date-picker-default-id"

        placeholder="mm/dd/yyyy"

        labelText="Date picker label"

        type="text"

      />

    </DatePicker>
DatePicker
Modifiers
DatePickerInput
Modifiers
size

Formatting

Anatomy of date pickers

Default date picker anatomy

Anatomy of a simple date input and a single date calendar picker.

  1. Label: Instructs the user what to do with the control.
  2. Date field: A text input field where the user can manually type in the date.
  3. Date format: Format instructions should appear as helper text below the field or inline with the label.
  4. Icon: calendar icon indicates the calendar menu is available.
  5. Calendar: The menu where a date may be selected.
  6. Month and year controls: Allows the user to navigate through past and future time frames.
  7. Previous and next month controls: Allows the user to move forward or backward one month at a time.
  8. Week day: Days of the week.
  9. Day: Days in the month, see calendar variants for specific day styles.

Anatomy of a time picker

Default time picker anatomy