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
Please enter a valid date
Mobile
Edit this section, Opens in new window

Operational states

January 2020
MoTuWeThFrSaSu
A date is selected
January 2020
MoTuWeThFrSaSu
Making a date range selection
January 2020
MoTuWeThFrSaSu
Period selected
Edit this section, Opens in new window

Anatomy

January 2020
MoTuWeThFrSaSu
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
MoTuWeThFrSaSu
Today markings
  1. Today and active
  2. Today
January 2020
MoTuWeThFrSaSu
Selecting a date range
  1. Range select start
  2. Range
  3. Range select end
January 2020
MoTuWeThFrSaSu
Selected a date range
  1. Range select start
  2. Range
  3. Range select end
Edit this section, Opens in new window

Specs

January 2020
MoTuWeThFrSaSu
Datepicker
Edit this section, Opens in new window
Contact us, Opens in new window