Angular Material- Datepicker
The datepicker allows the users to enter a date by text input or choose a date from calendar. It consists of a text input and a calendar popup that is associated with the matDatepicker property on the text input.
There is an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.
It is an input that is the part of <mat-form-field> and the toggle can be used as a prefix or suffix on the content input.
If we want to customize the icon inside the mat-datepicker-toggle, we can do so by using the matDatepickerToggleIcon directive.
app.component.html
app.component.ts
Output:
Date Range Selection
If we want to select multiple types of dates, we can use the mat-date-range-input and mat-date-range-picker components. They operate in tandem, similarly to mat-datepicker and required date picker input.
The mat-date-range-picker serves as a pop-up panel for selecting component dates. It works in the same way as matte-datepicker, but allows the user to select multiple times:
Connect the range picker using the rangePicker property:
Date Range Input Forms Integration
The matte-date-range-input component is used with form graph directive to sum the starting and end values from @angular/forms and validating it as a group.
app.component.html
app.component.ts
Output:
Changing the Datepicker Colors
The datepicker popup inherits the color palette (primary, accent, or warning) associated with the matte-form field. If we want to specify a different palette for the popup, we can set the color property on mat-datapic.
app.component.html
app.component.ts
app.component.css
Output:
Input and Change Events
The basic (input) and (change) events of the input will only trigger the user’s interaction with the input element; they are not fire when the user selects a date from the calendar popup.
app.component.html
app.component.ts
app.component.css
Output:
Choosing a date implementation and date format settings
Datepicker was built to date implementation agnostic. It can be made to work with the implementation of different dates. However, developers need to provide appropriate pieces for Datepicker to work with their chosen performance. The easiest way to ensure it is to import one of the provided data modules:
MatNativeDateModule
Date type | Date |
---|---|
Supported locales | en-US |
Dependencies | None |
Import from | @angular/material/core |
MatMomentDateModule
Date type | Moment |
---|---|
Import from | @angular/material-moment-adapter |
Highlighting Specific Dates
If we want to apply one or more CSS classes to some calendar dates (e.g., to highlight a holiday. It accepts a function with each calendar date and will apply to any returned classes. The return value will be anything that is taken by ngClass.
app.component.html
app.component.ts
app.component.css
Output:
Keyboard Interaction
The date picker supports the following keyboard shortcuts:
Shortcut | Action |
---|---|
ALT + DOWN_ARROW | It opens the calendar popup |
ESCAPE | It closes the calendar popup |
In month view:
Shortcut | Action |
---|---|
LEFT_ARROW | Go to the previous day |
RIGHT_ARROW | Go to next day |
UP_ARROW | Go to the same day in the previous week |
DOWN_ARROW | Go to the same day in the next week |
HOME | Go to the first day of the month |
END | Go to the last day of the month |
PAGE_UP | Go to the same day in the previous month |
ALT + PAGE_UP | Go to the same day in the previous year |
PAGE_DOWN | Go to the same day in the next month |
ALT + PAGE_DOWN | Go to the same day in the next year |
ENTER | Select current Date |
In year view:
Shortcut | Action |
---|---|
LEFT_ARROW | Go to the previous month |
RIGHT_ARROW | Go to next month |
UP_ARROW | Go up a row (back four months) |
DOWN_ARROW | Go down a row (forward four months) |
HOME | Go to the first month of the year |
END | Go to the last month of the year |
PAGE_UP | Go to the same month in the previous year |
ALT + PAGE_UP | Go to the same month ten years back |
PAGE_DOWN | Go to the same month in the next year |
ALT + PAGE_DOWN | Go to the same month ten years forward |
ENTER | Select current month |
In multi-year view:
Shortcut | Action |
---|---|
LEFT_ARROW | Go to the previous year |
RIGHT_ARROW | Go to next year |
UP_ARROW | Go up a row (back four years) |
DOWN_ARROW | Go down a row (forward four years) |
HOME | Go to the first year in the current range |
END | Go to the last year in the current range |
PAGE_UP | Go back 24 years |
ALT + PAGE_UP | Go back 240 years |
PAGE_DOWN | Go forward 24 years |
ALT + PAGE_DOWN | Go forward 240 years |
ENTER | Select current year |
Angular Content is a UI component library developed by the Angular team to build design components for desktop and mobile web applications. To install it, we need to install Angular in our project, and once you have it, you can enter the command below and download it.
Example 1:
app.module.ts:
app.component.html
Output:
It is the way by which a pop-up containing a calendar will be opened:
Example 1:
Modified module descriptor app.module.ts.
Modified HTML host file app.component.html.
Output:
Explanation
In the previous example, we have created an input box and bind a date picker named picker by using [matDatepicker] attribute. After that, we have created a date picker named picker by using the mat-date picker tag.