Angular: Material kontrolka Datepicker

Za pomocą kontrolki Datepicker, w łatwy sposób umożliwisz użytkownikowi obsługę wprowadzania daty.

Konfiguracja modułów

Żeby zacząć używać Datpickera musimy zaimportować jego moduł. Szczegóły, jak to zrobić znajdziesz w tym wpisie.

Dodajemy MatDatepickerModule:

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  exports: [
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})
export class MaterialModule {}

Importujemy trzy moduły: MatInputModule - Datepicker korzysta z pola tekstowego dlatego ten moduł jest nam potrzebny.

MatDatepickerModule - Moduł obsługujący kontrolkę

MatNativeDateModule - W przypadku kontrolki Datepicker musimy dodatkowo zaimportować jeden moduł. Służy on do obsługi daty. Możemy wybrać inny jak na przykład: MatMomentDateModule

Pierwsze użycie

Dodajmy taki kod do szablonu:

<mat-form-field>
  <mat-label>Kiedy masz urodziny?</mat-label>
  <input matInput [matDatepicker]="birthDatepicker">
  <mat-datepicker-toggle matSuffix [for]="birthDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #birthDatepicker></mat-datepicker>
</mat-form-field>

Do zbudowania Datpickera korzystamy z czterech elementów:

Z etykiety - to jest opcjonalne

Z pola tekstowego, w którym będzie wyświetlana data. Przypisujemy do niego identyfikator, którym będziemy się później posługiwać. Ta linijka kodu jest wymagana.

mat-datepicker-toggle to ikonka po wciśnięciu której wyświetli popup z kalendarzem umożliwiający użytkownikowi wybór daty. Dyrektywa: matSuffix sprawi, że ikonka zostanie wyświetlona po prawej stronie. Jeśli chcemy wyświetlić ją po lewej stronie wystaczy ustawić: matPrefix. Ta linijka jest opcjonalna.

I na koniec mat-datpicker to nasz Datepicker przypisujemy do niego unikalny ID wcześniej przez nas zdefiniowany. To oczywiście jest wymagane do działania Datepickera.

Ustawienie formatu daty

Kiedy uruchomisz ten przykład po wyborze daty zauważ, że data jest zapisana w formacie: Miesiąc/Dzień/Rok. Taki format obowiązuje w USA. Załóżmy, że chcemy wyświetlać datę w formacie Dzień.Miesiąc.Rok. Możemy to zrobić globalnie.

Otwórz plik, w którym importujesz moduły z Angular Material i dodaj:

import { MAT_DATE_LOCALE } from '@angular/material/core';
import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';

@NgModule({
  exports: [
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
 providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'pl-PL' }
  ]
})
export class MaterialModule {}

Zaimportowaliśmy zmienną MAT_DATE_LOCALE oraz w providers ustawiliśmy format wyświetlania daty domyślnie w Polsce.

Wybór zakresu daty

Inna ciekawą funkcjonalnością jest umożliwienie użytkownikowi ustawienia zakresu daty: od - do. Przykład:

<mat-form-field>
	<mat-date-range-input [rangePicker]="rangeDate">
		<input matStartDate placeholder="Od">
		<input matEndDate placeholder="Do">
	</mat-date-range-input>
	<mat-datepicker-toggle matSuffix [for]="rangeDate"></mat-datepicker-toggle>
	<mat-date-range-picker #rangeDate></mat-date-range-picker>
</mat-form-field>

Więcej informacji znajdziesz o tej kontrolce pod tym linkiem