How to set material datepicker format angular

Xin chào mọi người, hôm nay tienanhvn sẽ trình bày cho các bạn về material datepicker format angular đây là một trong những trường hợp khi các bạn làm với các sự kiện select datepicker in angular, bởi vì theo yêu cầu của người dùng muốn hiển thị ngày, tháng, năm theo một thứ tự nào đó thì các bạn phải format datepicker input in angular.

Datepicker in angular là gì?

Đây là một calendar cho phép bạn lựa chọn những ngày tháng năm, theo ý muốn bạn, nó hiện thị như một calendar với nhiều tháng, nhiều năm, nó giúp người dùng giảm thời gian nhập liệu.
Bây giờ chúng ta đi vào thực hiện fomart datepicker.

Link tham khảo thêm angular

1. How to multy language in angular
2. HOW TO HIDDEN AND SHOW EN ELEMENT IN ANGULAR
3. HOW TO MULTI LANGUAGE IN ANGULAR USING NGX-TRANSLATE
4. HOW TO GET LANGUAGE BROWSER IN ANGULAR

Step 1. Tạo một file date.adapter.ts

import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from "@angular/material";

export class AppDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
        if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
          const str = value.split('/');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
        }
        const timestamp = typeof value === 'number' ? value : Date.parse(value);
        return isNaN(timestamp) ? null : new Date(timestamp);
      }
   format(date: Date, displayFormat: string): string {
       if (displayFormat == "input") {
          let day = date.getDate();
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return   year + '-' + this._to2digit(month) + '-' + this._to2digit(day)   ;
       } else if (displayFormat == "inputMonth") {
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return  year + '-' + this._to2digit(month);
       } else {
           return date.toDateString();
       }
   }
   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   }
}
export const APP_DATE_FORMATS =
{
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       dateInput: 'input',
       monthYearLabel: 'inputMonth',
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
}

Trong đó:

 return   year + '-' + this._to2digit(month) + '-' + this._to2digit(day)

 bạn có thể thay đổi - thành / tùy ý của bạn.
 Step 2. thêm dòng lệnh vào trong app.module.ts

  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]

Hoặc có thể bạn bỏ dòng lệnh này trong file component.ts

@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
})

Step 3. Tạo một component có tên datepicker.component.ts

import { FormControl } from '@angular/forms';
import { DatePipe } from '@angular/common';
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
  styleUrls: ['datepicker-overview-example.css'],
  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
})
export class DatepickerOverviewExample {
  day = new Date();
  public date;
 constructor(private datePipe: DatePipe){
    console.log("anh "," " +datePipe.transform(this.day.setDate(this.day.getDate()+7)));
    this.date = new FormControl(this.datePipe.transform(this.day.setDate(this.day.getDate()+7)));
    console.log("anht",' ' +new Date());
 }
}

Step 4. Tạo một component.html

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

Demo online.
Tags: datepicker format in angular, format input datepicker angular, how to set datepicker in angular, angular datepicker format.