He estado tratando de aprender a usar el selector de fechas angular 13 y no puedo entender qué no funciona correctamente.
Aquí está mi módulo principal.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatNativeDateModule } from '@angular/material/core'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; @NgModule({ declarations: [ AppComponent, ... ], imports: [ AppRoutingModule, BrowserModule, HttpClientModule, ... BrowserAnimationsModule, MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule ], providers: [ MatDatepickerModule, MatNativeDateModule ], bootstrap: [AppComponent] }) export class AppModule { }Este es el código que utilicé, basado en este tutorial :
<input [matDatepicker]="myDatepicker"> <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle> <mat-datepicker #myDatepicker></mat-datepicker>Y así es como se ve: 1
Y realmente no entiendo lo que me estoy perdiendo y por qué no parece que debería hacerlo.
¡Gracias!
¿Puedes verificar si el material angular está instalado correctamente con todo el material css? Verifique su styles.css si se agregaron las cosas de material angular. ¿Tiene @ angular/core en su archivo package.json?
Otra cosa que puede verificar es si su selector de fecha está envuelto por un campo de formulario mat. Debe tener un aspecto como este:
<mat-form-field appearance="fill"> <input matInput [matDatepicker]="myDatepicker"> <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle> <mat-datepicker #myDatepicker ></mat-datepicker> </mat-form-field>Debe importar el tema que desea usar dentro de sus componentes de material.
Por ejemplo, puedes usar
@import "~@angular/material/prebuilt-themes/indigo-pink.css";para su css global.
También tuve el problema una vez. --> Angular 5 Material 2: Estilo selector de fecha
Más información sobre los temas Prebuild --> https://v6.material.angular.io/guide/theming#using-a-pre-build-theme