Back to components

Datepicker

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

Please enter a valid date

Table of Contents

Edit this section, Opens in new window

Usage

Please enter a valid date
Desktop
Mobile
Edit this section, Opens in new window

Operational states

January 2020
Mo Tu We Th Fr Sa Su
A date is selected
January 2020
Mo Tu We Th Fr Sa Su
Making a date range selection
January 2020
Mo Tu We Th Fr Sa Su
Period selected
Edit this section, Opens in new window

Anatomy

January 2020
Mo Tu We Th Fr Sa Su
Choose a date
  1. The datepicker window
  2. Go to previous month
  3. Title, month and year
  4. Go to next month
  5. Name of weekday
  6. Non selectable day
  7. Selected day
  8. Normal selectable day
January 2020
Mo Tu We Th Fr Sa Su
Today markings
  1. Today and active
  2. Today
January 2020
Mo Tu We Th Fr Sa Su
Selecting a date range
  1. Range select start
  2. Range
  3. Range select end
January 2020
Mo Tu We Th Fr Sa Su
Selected a date range
  1. Range select start
  2. Range
  3. Range select end
Edit this section, Opens in new window

Specs

January 2020
Mo Tu We Th Fr Sa Su
Datepicker
Edit this section, Opens in new window
Contact us, Opens in new window