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

MatMomentDateModule

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:

In month view:

In year view:

In multi-year view:

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.