Javatpoint Logo
Javatpoint Logo

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:

Angular Material Datepicker

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:


Angular Material Datepicker

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:

Angular Material Datepicker

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:

Angular Material Datepicker

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:

Angular Material Datepicker

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:

Angular Material Datepicker

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:

Angular Material Datepicker

It is the way by which a pop-up containing a calendar will be opened:

Angular Material Datepicker

Example 1:

Modified module descriptor app.module.ts.

Modified HTML host file app.component.html.

Output:

Angular Material Datepicker

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.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA