Material angular 7 – DatePicker

La <mat-datepicker> Directiva Angular se utiliza para crear un control de selección de fecha que permite seleccionar la fecha de un calendario o introducirla directamente en el campo de entrada.

En este capítulo, mostraremos la configuración necesaria para dibujar un control del datepicker utilizando Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatDatepickerModule, MatInputModule, MatNativeDateModule}de@angular/material; import{FormsModule, ReactiveFormsModule}de@angular/forms;@NgModule({ {Module
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatDatepickerModule,MatInputModule,MatNativeDateModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

matInput[matDatepicker] ="picker"="Choose a date">matSuffix[for] ="picker"> #picker>

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado un cuadro de entrada y enlazado un selector de fecha llamado picker usando el atributo[matDatepicker].
  • Luego, hemos creado un selector de fecha llamado picker usando la etiqueta mat-datepicker.