角材料日期选择器输出

Question

我已经查看了有关 Angular 材质日期选择器的文档，但无法更改输出。我在 stackoverflow 上使用了一些答案，但它们仍然只改变了显示的格式。正如您在图片中看到的，我无法将日期选择器输出从 Mon Feb 11 更改为日期选择器输入字段 11-02-2019 example中的格式。如何让它输出日期选择器输入行上显示的格式而不是 2 月 11 日星期一并删除附加的时间值。

到目前为止，这是我的 component.ts：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {DateAdapter,NativeDateAdapter,MAT_DATE_FORMATS,MAT_DATE_LOCALE} from "@angular/material/core";
import * as moment from "moment";
import { DatabaseService } from 'src/app/database.service'
import { Observable } from 'rxjs';
const CUSTOM_DATE_FORMATS = {parse: {dateInput: { month: "short", year: "numeric", day: "numeric" }},
display: {
dateInput: "input",
monthYearLabel: { year: "numeric", month: "short" },
dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
monthYearA11yLabel: { year: "numeric", month: "long" }}};
const dateFormat = "DD-MM-YYYY";
class AppDateAdapter extends NativeDateAdapter {format(date: Date, displayFormat: Object): string {
if (displayFormat === "input") {return moment(date).format(dateFormat);}else {
  return date.toDateString();}}}
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],

  providers: [
     { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
     { provide: DateAdapter, useClass: AppDateAdapter }
]
})
export class DashboardComponent implements OnInit {
get data(): string {
return this.databaseService.serviceData;
}
set data(value: string) { 
this.databaseService.serviceData = (value);  } 

@Input() placeholder;
@Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
@Input() selectedValue;
@Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();

private _selectedValue;

constructor(public databaseService: DatabaseService){}

ngOnInit() {
this._selectedValue = this.data;}

onChange($event) {
this.selectedValue = this.updateDate($event.value);
this.onFilter.emit(this.data);}

updateDate(date) {
let formatedDate;
if (date !== undefined) {
  formatedDate = moment(date).format(dateFormat);
}
this.selectedValueChange.emit(formatedDate);
return formatedDate;
   }

}

还有我的html：

<div style="top: 50%; position: absolute;">
  <mat-form-field class="datepicker">
    <input matInput [matDatepicker]="picker" [(ngModel)]= data>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker touchUi #picker></mat-datepicker>
  </mat-form-field>  
 <h2 >Data from A: {{ data }} </h2> 
 <input [(ngModel)] = data/>
 <a [routerLink]="['/**']">Go to B</a> 
</div>

Answer 1

Material DatePicker 提供的输出对象已经包含了您需要的所有信息，您只需正确打印它们即可。

尝试：

    <h2 >Data from A: {{data.format("DD-MM-YYYY")}} </h2> 

而不是你的：

    <h2 >Data from A: {{ data }} </h2> 

可以肯定的是，我已经在一个工作项目上对此进行了测试，并且它可以正常工作。

编辑：

如果您需要在日期更改时执行某些过程，您需要在 datePicker 输入上设置一个“监听器” （dateChange），如下所示：

   ...
    <input matInput [matDatepicker]="picker" [(ngModel)]= data (dateChange)="yourFunctionName($event.value)">
   ...

$event.value 的保存值为“data”，因此此时，您可以删除 [(ngModel)]= data （在Angular 6中已弃用）

然后，一旦设置了侦听器，您就可以在打字稿文件中创建处理日期更改的函数。

yourFunctionName(event: any) {
    const data = event;
    const formattedDate = data.getDate() + '-' + (data.getMonth() + 1) + '-' + data.getFullYear();
    ... do your operations with formattedDate ...
}

现在，“formattedDate”变量中的日期格式正确。
如果您需要在此函数之外访问组件中的此数据，您可以声明一个外部变量（例如您已经创建的“数据”）并使用 this.data 语法在函数内部引用它

data: string;

yourFunctionName(event: any) {
        ...
        this.data = data.getDate() + '-' + (data.getMonth() + 1) + '-' + data.getFullYear();
        ...
    }

您可以使用“.getDate()”和朋友或使用 Moment 来随意格式化您的日期。