CODEWITHSUNDEEP
javascriptangularangular6
Hemadri Dasari
Hemadri Dasari

Reputation: 33974

How to format material datepicker date value to "MM-DD-YYY" format in Angular 6?

I am trying to format below date to following format MM-DD-YYYY in Angular 6. I had a look at simpler issues posted in SO and other sites as well but I am unable to resolve it.

I am using Material Angular DatePicker component.

Date picker gives me 

Thu Oct 25 2018 00:00:00 GMT+0400 (Gulf Standard Time)

I want to format it to 

MM-DD-YYYY

My code

<mat-form-field>
    <input matInput [min]="minDate" [matDatepicker]="date" [(ngModel)]="request.date | request.date: 'dd/MM/yyyy hh:mm a'" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
    <mat-datepicker #date></mat-datepicker>
</mat-form-field>

I also tried with DatePipe module like below but nothing works

this.datePipe.transform(this.request.date,"MM-DD-YYYY")

Upvotes: 5

Views: 14030

Answers (4)

Narendra Singh Rathore
Narendra Singh Rathore

Reputation: 706

import { formatDate } from '@angular/common';

formatDate(date, 'MMM, yyyy', 'en-US');

Angular 9

Upvotes: 0

Leandro Q
Leandro Q

Reputation: 221

Try this in the component you are using mat-datepicker

import { DateAdapter } from '@angular/material';

constructor(private dateAdapter: DateAdapter) { this.dateAdapter.setLocale('your locale'); }

Upvotes: 1

mak15
mak15

Reputation: 438

Use the dateformat function from angular common.

Refer this answer

Upvotes: 1

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

You can use DatePipe to format the date as per your requirement.

Import in main.module.ts

import { DatePipe } from '@angular/common';

and add Datapipe in Providers array.

Then in related component import the same as

import { DatePipe } from '@angular/common';

and in constructor

constructor(private datePipe : DatePipe)
{

}

and to use date pipe just use

this.datePipe.transform(your_date, 'MM-dd-yyyy');

Have a look at StackBlitz Example where I have consoled the date value in MM-dd-yyyy format.

Upvotes: 7

Related Questions