Form Controls: Datepicker & Navigation Toolbar

We will complete our walkthrough using the form controls of the Angular Material library by looking at the datepicker control.

Datepicker

We can do much more with a datepicker control than just selecting a date from a pop-up calendar. We can deactivate date ranges, format the date, show it yearly and monthly, and so on. In this lesson, we will only learn how to get up and running with it.

To use a datepicker control, we first need to import the following modules:-

• MatDatepickerModule from the @angular/material/datepicker namespace.

• MatNativeDateModule from the @angular/material/core namespace. It provides parsing and formatting utilities for dates, and it is based on the native Date object implementation.

A datepicker control in Angular Material must be used in conjunction with an input control, like the autocomplete ...