How to change angular material datepicker format

Question

This is the format of date I am getting when I am using angular material datepicker....Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time)

But I need date in (YYYY-MM-DD) or (YYYY-MM-DDTHH:mm) this format.

this is model class I am using to capture data from angular material form

export class FlightSchedule {

    constructor(
        public destination: string,
        public origin: string,
        public date: string,
        public limit: string
    ) {}

}

Please help me, I am unable to convert date in YYYY-MM-DD or YYYY-MM-DDTHH:mm format.

I am new to Angular

Thanks in advance

You are looking for to convert date that you received from `datepicker` or format date inside `datepicker` input? — Patryk Brejdak, Nov 18 '18 at 10:05
I am looking to convert date that I received from datepicker — mmodalities, Nov 18 '18 at 18:04

score 50 · Accepted Answer · edited Jun 28 '22 at 04:55

50

You need to provide an object containing the formats you wish to use. The object should look something like:

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

You then need to add that in to your providers array, like so:

  import { MAT_DATE_FORMATS } from '@angular/material/core';
  import { MomentDateAdapter } from '@angular/material-moment-adapter';

  //...

  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

Here is a StackBlitz demo to show it working

edited Jun 28 '22 at 04:55

AnasSafi

5,353
1
35
38

answered Nov 18 '18 at 10:16

user184994

17,791
1
46
52

Thank you user184994, but I am unable to customize it in my project. This is my html datepicker format, which i am attaching it now – mmodalities Nov 18 '18 at 17:56
– mmodalities Nov 18 '18 at 17:56
Why are you unable to customize it? – user184994 Nov 18 '18 at 18:04
i believe I am having class="form-control" but in example it is [formControl]="date", so i unable to use date = new FormControl(moment()); in app component – mmodalities Nov 18 '18 at 18:24
That shouldn't matter... Are you able to create a StackBlitz that demonstrates your code? – user184994 Nov 18 '18 at 18:25
@mmodalities I've just used that HTML in the original Stackblitz and it works fine – user184994 Nov 18 '18 at 18:28
sorry sir, I do not know how to create StackBlitz of my code, please help me so I can share with you – mmodalities Nov 18 '18 at 18:30
@mmodalities That stackblitz link appears to be broken – user184994 Nov 18 '18 at 19:15
That stackblitz seems to be erroring when I try to run it – user184994 Nov 18 '18 at 19:19
since I imported it from github so node_modules is added in .gitignore – mmodalities Nov 18 '18 at 19:30
so it is showing this error, how to add this package to this project on stackblitz – mmodalities Nov 18 '18 at 19:31
this is the project on github https://github.com/mmodal123/lufthansaApp – mmodalities Nov 18 '18 at 19:37
Okay, you also need the `MomentDateAdapter` like in my original StackBlitz. I've just tried that out with your code, and it works – user184994 Nov 18 '18 at 19:43
I want to call api ----- https://lihcode-lufthansa-open-new-v1.p.mashape.com/v1/operations/schedules/fra/fra/1542652200000?limit=10, but date here is in 1542652200000 format I am getting which results in bad request format – mmodalities Nov 19 '18 at 01:01
1

you can't manually change the date in this solution. it's behave wired – chami007 Apr 26 '19 at 09:44
don't forget to install '@angular/material-moment-adapter' and 'moment' – WtFudgE Nov 01 '20 at 04:01
How can i show time also with this one like 2021-04-26T00:00:00 ? – rahularyansharma Mar 25 '21 at 04:05
Try changing the year manually to e.g. 4000. It will show the year is invalid! Wired! – Ahsan Apr 20 '21 at 05:43

Nato Boram · Answer 2 · 2020-11-18T18:24:54.773

23

No need to use MomentDateAdapter!

Here's my solution with the least amount of code and using the MAT_NATIVE_DATE_FORMATS.

Declare your own date formats

import { MatDateFormats, MAT_NATIVE_DATE_FORMATS } from '@angular/material';

export const GRI_DATE_FORMATS: MatDateFormats = {
  ...MAT_NATIVE_DATE_FORMATS,
  display: {
    ...MAT_NATIVE_DATE_FORMATS.display,
    dateInput: {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    } as Intl.DateTimeFormatOptions,
  }
};

Use them

@Component({
  selector: 'app-vacation-wizard',
  templateUrl: './vacation-wizard.component.html',
  styleUrls: ['./vacation-wizard.component.scss'],
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: GRI_DATE_FORMATS },
  ]
})

Don't forget to set the appropriate language!

constructor(private readonly adapter: DateAdapter<Date>) {}
this.adapter.setLocale(this.translate.currentLang);

That's all!

edited Nov 18 '20 at 18:24

answered Jan 24 '20 at 18:15

Nato Boram

4,083
6
28
58

what is `this.adapter` ? – gyozo kudor Aug 24 '20 at 13:21
@gyozokudor https://material.angular.io/components/datepicker/overview#setting-the-locale-code – Nato Boram Sep 10 '20 at 18:52
`this.adapter.setLocale("en-EN")` goes into constructor body and adapter becomes a property of that class, that's whay `this.adapter` – Hrvoje T Nov 03 '21 at 22:29

score 14 · Answer 3 · answered Aug 14 '19 at 11:09

14

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';

 export const DateFormats = {
            parse: {
                dateInput: ['YYYY-MM-DD']
            },
            display: {
                dateInput: 'YYYY-MM-DD',
                monthYearLabel: 'MMM YYYY',
                dateA11yLabel: 'LL',
                monthYearA11yLabel: 'MMMM YYYY',
            },
        };

    providers: [

        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
          { provide: MAT_DATE_FORMATS, useValue: DateFormats }

      ],

add above code in your app.module. it is working perfectly for me.

answered Aug 14 '19 at 11:09

Murugan

615
5
19

4

@MSM any way to this this on run time – Rohitesh Jul 24 '20 at 11:44
How can i show time also with this one like 2021-04-26T00:00:00 ? – rahularyansharma Mar 25 '21 at 04:05
This only works for ng serve and not on production / run time. – Collin Sep 20 '22 at 17:00

score 0 · Answer 4 · answered Dec 16 '20 at 12:15

  modelChanged(date) {
    var theDate = new Date(Date.parse(date));
    const localDate = theDate.toLocaleString().split(" ");

    console.log(localDate);
  }

    <!--I had the same issue and found it that with javascript was simple approach
--->
    
    <mat-form-field class="example-full-width" appearance="fill">
          <mat-label>Choose a date</mat-label>
          <input
            matInput
            [matDatepicker]="picker"
            [(ngModel)]="date"
            (ngModelChange)="modelChanged($event)"
          />
          <mat-datepicker-toggle
            matSuffix
            [for]="picker"
          ></mat-datepicker-toggle>
          <mat-datepicker touchUi #picker color="primary"></mat-datepicker>
        </mat-form-field>

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. — Doj, Dec 16 '20 at 12:37
Upvoted because it works and even it has no explanation, the code is very understandable. — Alan Telles, Dec 23 '21 at 14:53

score 0 · Answer 5 · answered Feb 02 '22 at 09:00

A shortcut way would be to create javascript date object and then format it to whatever format you want. Assuming you have [(ngModel)]="myDate" on your date input, you can do:

var formatedDate = new Date(this.myDate).toLocaleString();

This is short way of doing what u want :)

How to change angular material datepicker format

5 Answers5

Linked