DatePicker
Using pickers, you can display past, present, or future dates. Depending on the type of date (exact, approximate, memorable) you are asking for from the user, you will need to choose the best picker.
Usage
- Pickers provide options for displaying past, present, or future dates.
- Choose the appropriate picker based on the type of date needed (exact, approximate, memorable).
- Date picker offer precise control for specific dates.
Anatomy
Calendar has a container and a drop down window which has the several dates and month year wise which a indication of the states and two CTAs (optional) which are primary and secondary.
States
A date picker includes two views: CTAs and without CTAs.
Date Picker with CTAs
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sept | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Date Picker without CTAs
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sept | Oct | Nov | Dec |
2019 | 2020 | 2021 | 2022 |
2023 | 2024 | 2025 | 2026 |
2027 | 2028 | 2029 | 2030 |
Specifications
Structure and spacing measurements for datepicker.
Live Demo
The Datepicker is demonstrated in a live environment in this demo.