Question

我已经查看了有关Angular材质datepicker的文档，但更改为输出无效。我在这里使用了一些关于stackoverflow的答案，但它们仍然只更改了显示的格式。正如您在图片中所看到的，我无法将Date Febicker的输出从2月11日星期一更改为datepicker的输入字段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

“物料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来设置日期格式。

角材料日期选择器输出

1 个答案: