Angular Datepicker change dateformat

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.

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)

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/common';

Then,

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