Вы работаете над проектом Angular и используете компонент mat-datepicker для обработки ввода даты? Правильное форматирование дат может существенно улучшить взаимодействие с пользователем и обеспечить согласованность данных. В этой статье блога мы рассмотрим различные методы форматирования дат с помощью компонента mat-datepicker, попутно предоставляя вам примеры кода и разговорные пояснения.

Метод 1: использование встроенного канала данных Angular

Самый простой способ отформатировать дату в компоненте mat-datepicker — использовать встроенный канал даты Angular. Вот пример формата даты в формате «дд-мм-гггг»:

<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

Приведенный выше код отобразит дату в формате, указанном в языковых настройках вашего приложения Angular по умолчанию. Чтобы отформатировать дату как «дд-мм-гггг», вы можете добавить канал даты Angular в поле ввода следующим образом:

<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" [ngModelOptions]="{timezone: 'UTC'}"
  [value]="selectedDate | date: 'dd-MM-yyyy'">

Метод 2: использование библиотеки moment.js

Если вы предпочитаете большую гибкость в форматировании даты, вы можете использовать популярную библиотеку moment.js. Сначала убедитесь, что в вашем проекте Angular установлен moment.js:

npm install moment

Затем импортируйте moment.js в свой компонент:

import * as moment from 'moment';

Теперь вы можете использовать moment.js для форматирования даты в нужном формате. Вот пример:

import { Component } from '@angular/core';
@Component({
  selector: 'app-date-picker',
  template: `
    <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" [ngModelOptions]="{timezone: 'UTC'}"
      [value]="formatDate(selectedDate)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  `
})
export class DatePickerComponent {
  selectedDate: Date;
  formatDate(date: Date): string {
    return moment(date).format('DD-MM-YYYY');
  }
}

Метод 3: использование пользовательской директивы

Другой подход — создать специальную директиву, управляющую форматированием даты. Этот метод дает вам полный контроль над логикой форматирования. Вот пример:

import { Directive, ElementRef, HostListener } from '@angular/core';
import * as moment from 'moment';
@Directive({
  selector: '[appDateFormat]'
})
export class DateFormatDirective {
  constructor(private el: ElementRef) {}
  @HostListener('input')
  onInput() {
    const inputValue = this.el.nativeElement.value;
    const formattedDate = moment(inputValue, 'DD-MM-YYYY').format('DD-MM-YYYY');
    this.el.nativeElement.value = formattedDate;
  }
}

Чтобы использовать пользовательскую директиву, добавьте атрибут appDateFormatв поле ввода:

<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" [ngModelOptions]="{timezone: 'UTC'}"
  appDateFormat>