Angular Material |如何更改数据选择器输出格式？

Question

我使用 Angular material 数据选择器，但我想更改数据选择器输出。

这是输出：2022 年 2 月 2 日，星期三 00:00:00 GMT+0300 (GMT+03:00)

想要改变：2/2/2022

Html :

<mat-form-field class="example-full-width" 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)
  }
}

Answer 1

正如@Stacky 在评论中提到的，您可以使用公共模块中的 formatDate 方法。

或

您可以使用模板引用变量直接访问输入值。在输入元素上添加模板引用变量并将其作为参数传递给 onDateChange 回调。

component.html

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

在component.ts中我们可以像这样从输入中读取值

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

Angular Material |如何更改数据选择器输出格式？

Angular Material | How can change datapicker output format?

angular-material

angular