Angular Material | How can change datapicker output format?-CodePudding

I use Angular material datapicker but ı want to change dataPicker output.

This is output : Wed Feb 02 2022 00:00:00 GMT 0300 (GMT 03:00)

Want to change : 2/2/2022

Html :

<mat-form-field  appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" (dateInput)="OnDateChange($event)" >
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

calendar.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
  event : any
  constructor() { }

  ngOnInit(): void {
  }
  OnDateChange(event){
    this.event = event
    console.log(this.event.value)
  }
}

CodePudding user response：

As @Stacky mentioned in the comment you can use formatDate method from common module.

You can access input value directly by using template reference variable. Add template reference variable on input element and pass it as argument to onDateChange callback.

component.html

 <input matInput #inputRef [matDatepicker]="picker" (dateInput)="OnDateChange(inputRef)">

In component.ts we can read value from input something like this

OnDateChange(event:HTMLInputElement){
    this.event = event
    console.log(this.event.value)
 }