Form Controls: Datepicker & Navigation Toolbar
Learn how to use the datepicker form control and implement the navigation toolbar in an Angular application.
We'll cover the following
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 nativeDate
object implementation.
A datepicker control in Angular Material must be used in conjunction with an input control, like the autocomplete control that we saw earlier:
Get hands-on with 1200+ tech skills courses.