Angular Datepicker change dateformat

Question

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());

Solution 1

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 component 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.

Solution 2

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

The Data Pipe can be found on the docs.

Basically, on your component.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/common';
   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)

Solution 3

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