Açısal Malzeme 7 - DatePicker

<mat-datepicker>bir Açısal Yönerge, bir takvimden hangi tarihin seçilebileceğini veya doğrudan giriş kutusu kullanılarak girilebileceğini kullanarak bir tarih seçici kontrolü oluşturmak için kullanılır.

Bu bölümde, Angular Material kullanarak bir tarih seçici kontrolü çizmek için gereken konfigürasyonu göstereceğiz.

Açısal Uygulama Oluşturun

Angular 6 - Project Setup bölümünde oluşturduğumuz Angular uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım Açıklama
1 Angular 6 - Project Setup bölümünde açıklandığı gibi materialApp adıyla bir proje oluşturun .
2 Değiştir app.module.ts , app.component.ts , app.component.css ve app.component.html olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3 Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatDatepickerModule, MatInputModule,MatNativeDateModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatDatepickerModule, MatInputModule,MatNativeDateModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir app.component.html.

<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date">
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Sonuç

Sonucu doğrulayın.

Detaylar

  • İlk olarak, bir giriş kutusu oluşturduk ve adında bir tarih seçici bağladık picker [matDatepicker] özelliğini kullanarak.

  • Ardından, adında bir tarih seçici oluşturduk picker mat-datepicker etiketi kullanarak.