Angular reactive Form material Date picker manual input format DD/MM/YYYY

Question

I want to change input format of datePicker, default is MM/DD/YYYY i want to change it to DD/MM/YYYY. html code:

<mat-form-field>
    <mat-label>Date de creation min</mat-label>
    <input formControlName="dateDebut" matInput [matDatepicker]="pickerCreationMin"
           placeholder="jj/mm/aaaa">
    <mat-datepicker-toggle matSuffix [for]="pickerCreationMin"></mat-datepicker-toggle>
    <mat-datepicker #pickerCreationMin></mat-datepicker>
</mat-form-field>

format-picker.ts

import { NativeDateAdapter } from '@angular/material';
import { MatDateFormats } from '@angular/material/core';

export class AppDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat): string {
      if (displayFormat === 'input') {
        let day: string = date.getDate().toString();
        day = +day < 10 ? '0' + day : day;
        let month: string = (date.getMonth() + 1).toString();
        month = +month < 10 ? '0' + month : month;
        let year = date.getFullYear();
        return `${day}-${month}-${year}`;
      }
      return date.toDateString();
   }
}
export const APP_DATE_FORMATS: MatDateFormats = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

but when i input manually date with DD/MM/YYYY format i got error of invalid date exemple: 24/08/2019

Tibike · Accepted Answer · 2019-10-25 12:29:11Z

1

Here another version of an AppDateAdapter:

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 this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
      } else if (displayFormat == "inputMonth") {
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        return  this._to2digit(month) + '/' + year;
      } 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'},
   }
}

answered Oct 25, 2019 at 12:29

Tibike

3583 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahdi Over a year ago

it's work for me but i should add providers: [ {provide: DateAdapter, useClass: AppDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}, ] in each Module, not only in root module

yivi · Accepted Answer · 2021-09-09 15:36:17Z

0

import * as moment from 'moment'; 

   const momentDateDebut = new Date(this.dateDebut)
   const formattedDateDebut = moment(momentDateDebut).format("DD/MM/YYYY");

edited Sep 9, 2021 at 15:36

yivi

48.2k18 gold badges133 silver badges158 bronze badges

answered Oct 25, 2019 at 11:46

Omar Amaoun

5261 gold badge3 silver badges21 bronze badges

2 Comments

Buzzinga Over a year ago

How do you even know if he is using moment or not ??

Mahdi Over a year ago

i dont have any problème to use moment, but our users write date in this format "DD/MM/YYYY" and the default validator take this format "MM/DD/YYYY"

Collectives™ on Stack Overflow

Angular reactive Form material Date picker manual input format DD/MM/YYYY

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related