CODEWITHSUNDEEP
angulartypescriptdateangular-material2
mmodalities
mmodalities

Reputation: 435

How to change angular material datepicker format

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

Upvotes: 40

Views: 121992

Answers (5)

user184994
user184994

Reputation: 18281

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

Upvotes: 54

Ashran Haider
Ashran Haider

Reputation: 161

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 :)

Upvotes: 0

Francisco Roa
Francisco Roa

Reputation: 21

  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>

Upvotes: 0

Nato Boram
Nato Boram

Reputation: 4980

No need to use MomentDateAdapter!

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

  1. 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,
  }
};
  1. 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!

Upvotes: 31

Murugan
Murugan

Reputation: 692

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.

Upvotes: 15

Related Questions