i use the DatePicker from Angular Material and I would like to change the output format to yyyy/mm/dd.

Currently it prints the date in the following format: Wed Nov 14 2018 00:00:00 GMT+0100 (Central European Normal Time)

How can I do this?

datepicker = new FormControl('', [Validators.required]);


console.log(this.datepicker.value.toString());

i use the DatePicker from Angular Material and I would like to change the output format to yyyy/mm/dd.

Currently it prints the date in the following format: Wed Nov 14 2018 00:00:00 GMT+0100 (Central European Normal Time)

How can I do this?

datepicker = new FormControl('', [Validators.required]);


console.log(this.datepicker.value.toString());

• javascript
• angular
• typescript
• datepicker
• angular-material

• 1 You can use DatePipe in your template to show date in desired format, more on angular.io/api/mon/DatePipe – Suryan Commented Nov 2, 2018 at 19:25
• the datepicker value is a Date object, the "to string" method on the Date object prints in that format. If you want the format to be different, then the reason matters. If you want to print it on the screen, then the date pipe mentioned above is the correct method, otherwise you might need something else. – bryan60 Commented Nov 2, 2018 at 21:10

4 Answers 4

DatePicker works with date object. When you print on debugging console you will always see the date in full mode. If you want that your ponent shows the date in a specific format, you need to configure the library on the module.

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
})
export class MyApp {}

More information are available on official documentation. I hope it helps.

To format only the output of a variable, you should use pipes.

The Data Pipe can be found on the docs.

Basically, on your ponent.html, you have to do:

<p>The date is {{ datepicker.value | date:'yyyy/MM/dd' }}</p>

This will display the datapicker.value formatted as yyyy/mm/dd. You have a lot of other options to format your output based on pipes and even create your owns.

To format the date on the .ts file, you have a couple of options.

1. Use the Date Pipe from Angular.
   1. import { DatePipe } from '@angular/mon';
   2. new DatePipe('en').transform(this.datepicker.value, 'yyyy/MM/dd');
2. Use dateformat (it changes the prototype of Date object, adding a format method)
3. Use date-fns
4. Use moment.js (overkill, super heavy for such small use)

You can use Moment.js to format your date to "YYYY/MM/DD" format

moment(this.datepicker.value).format('YYYY/MM/DD')

using moment will help us change date into different formats

First,

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

Then,

let val = this.dynamicForm.get('datePicker').value;
val = formatDate(val,'yyyy/MM/dd','en');
this.dynamicForm.controls['datePicker'].setValue(val);