Introduction
The Datepicker component allows users to select a date from a calendar interface, often used in forms and for date-based filtering. The Datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components, directives and the date implementation that work together.
Anatomy
- Month/Year button: Toggles between month and year view.
- Navigation buttons: Allow transition to previous or next month.
- Days row: Static row displaying days of the week.
- Date row: Represents a week with each cell depicting a day.
|
# |
Element name |
Element type |
|---|---|---|
|
1 |
Header title |
Text |
|
2 |
Month label |
Text |
|
3 |
Day of the week label |
Text |
|
4 |
Previous month button |
Button |
|
5 |
Next month button |
Button |
|
6 |
Day |
Selectable element |
|
7 |
Clear dates button |
Button |
|
8 |
Confirm dates button |
Button |
States
The Datepicker itself has two primary states:
- Unselected State: When no date has been chosen.
- Selected State: When a date has been chosen.
The individual days within the calendar have a variety of states to represent different interactions and statuses.
|
State |
Description |
|---|---|
|
Default |
The standard state for a day that is available for selection. |
|
Hover |
The state when a user hovers over a day. |
|
Pressed |
The state when a day is being clicked or tapped. |
|
Selected |
The state for a day that has been selected. |
|
Disabled |
The state for a day that is not selectable. |
|
Start Range |
The state for the first day in a selected range. |
|
In Range |
The state for days that fall within a selected range. |
|
End Range |
The state for the last day in a selected range. |
|
In Range Hover |
The state when a user hovers over a day that is within a selected range. |
|
Today Indicator |
A special indicator to highlight the current day. |
Types
The Datepicker component offers two types to suit various user needs.
Single Month Datepicker
Date Range: Allows users to select a range of dates within a single month.
Single Date: Allows users to select a single date within a single month.
Double Month Datepicker
Date Range Selection: Allows users to select a range of dates across two months. On mobile devices, it transforms into an infinite scroll Datepicker within a full-screen dialog for an enhanced user experience.
Single Date: Allows users to select a single date within a single month.
The Single Month Datepicker uses the Angular component, while the Double Month Datepicker is a custom Aero component designed for selecting date ranges across two months.