Anatomy
|
Item |
Name |
Description |
Component |
Optional |
|---|---|---|---|---|
|
1 |
Date Picker Form |
Form field to select the Date in the calendar. |
|
|
|
2 |
Icon |
- |
|
|
|
3 |
Previous and next controls |
Enables the user to browse through past and future time periods. |
|
|
|
4 |
Month and year controls |
Enables the user to browse through past and future months and years. |
|
|
|
5 |
Week Day |
Days of the week. |
|
|
|
6 |
Day |
Days of the month. |
|
|
|
7 |
Calendar |
- |
|
|
Specification & Properties
States
|
Item |
State |
|---|---|
|
1 |
Default |
|
2 |
Hover |
|
3 |
Active |
|
4 |
Disabled |
Spacing
|
Property |
Value |
Token |
|---|---|---|
|
Padding |
16px |
spacing.200 |
|
Gap |
8px |
spacing.100 |
|
Gap |
4px |
spacing.50 |
Types
The Date Picker, same as the Date Range Picker can be use in different ways. As a component inside of a form composition with the Calendar as an overflow element, or inline, displayed inside of the page.
|
Item |
Type |
|---|---|
|
1 |
overflow |
|
2 |
inline |
Building blocks
Text Input
The field to select the Date is follow the same state as all our other fields. If you want to know more about the sates go to Form Field
Calendar
The calendar is a fundamental part of the Date Picker and an internal building block, which must be used with an input field and can be displayed in an overflow menu, dropdown, or inline.
Calendar: Variants
|
Item |
Variant |
|---|---|
|
1 |
Default |
|
2 |
Today |
|
3 |
Selected (Single) |
|
4 |
Previous/ Next |
|
5 |
Range Start |
|
6 |
Range Middle |
|
7 |
Range End |
|
8 |
Not Available |
Composition: Date & time compound
The Date Time Compound component consists of two form elements, each with a label, text input, and a dropdown menu. The dropdown menu features a grid-based calendar and various filters. The date form element functions as the trigger for displaying the dropdown menu.
Layout
Desktop vs. Mobile
The desktop version of the Date Picker component is shown in a dropdown with a grid-based calendar, while the mobile version is displayed in a mobile drawer.
