我使用角材料2 Date-Picker组件
它理解的唯一字符串输入是ISO日期格式
防爆。 “2017-11-13T10：39：28.300Z”
但我想用语言环境日期值修补我的表单控件
防爆。 “11/13/2017，下午4:09:46”
因此它输出后面的格式甚至期望这种格式。
我怎样才能做到这一点？有没有办法不使用ISO但自定义格式？
一些想法：
我应该编写自定义DateAdapter吗？
更新：
https://stackblitz.com/edit/angular-material-moment-adapter-example-bqvm2f
我试图通过扩展nativeDateAdaptor来实现自定义dateAdaptor
最好的解决方案是使用ControlValueAccessor并创建一个自定义输入组件，这将使您可以控制组件的输入和输出。
更新：
以下是使用Moutaz-homsi复制的这种方法的参考实现
https://stackblitz.com/edit/angular-dlxnmx?file=app%2Fcva-date.component.ts
你需要创建一个扩展NativeDateAdapter的类（来自“@ angular / material / core”）
如果覆盖格式功能，您将在选择日期后更改输入上日期的显示方式。手动编辑输入值时，将调用解析函数，以显示有效日期。
有关详细信息，请参阅第2条评论：https://github.com/angular/material2/issues/5722
编辑：
我找不到格式化输出的方法，所以我将材质的datepicker组件包装到自定义组件中。
此自定义组件在属性上具有双向绑定以获取日期：@Input() selectedValue和@Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();
在ngInit上设置private _selectedValue;，它将包含datepicker日期。
然后在模板中，html datepicker输入元素具有[(ngModel)]="_selectedValue" (dateChange)="onChange($event)"
onChange函数获取datepicker值_selectedValue，格式化它并将其发送到selectedValueChange。
最终组件如下所示：
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";
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 = "YYYY-MM-DD";
// date adapter formatting material2 datepickers label when a date is selected
class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === "input") {
return moment(date).format(dateFormat);
} else {
return date.toDateString();
}
}
}
@Component({
selector: "datepicker",
templateUrl: "./datepicker.component.html",
styleUrls: ["./datepicker.component.scss"],
providers: [
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
{ provide: DateAdapter, useClass: AppDateAdapter }
]
})
export class DatepickerComponent implements OnInit {
@Input() placeholder;
@Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
@Input() selectedValue;
@Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();
private _selectedValue;
constructor() {}
ngOnInit() {
this._selectedValue = this.selectedValue;
}
onChange($event) {
this.selectedValue = this.updateDate($event.value);
this.onFilter.emit(this.selectedValue);
}
updateDate(date) {
let formatedDate;
if (date !== undefined) {
formatedDate = moment(date).format(dateFormat);
}
this.selectedValueChange.emit(formatedDate);
return formatedDate;
}
}
不确定，如果您已经这样做了，但我发现了一些可能让您对实施有所了解的信息。
截至今天，Angular Material Date Module支持两种提供日期值MatNativeDateModule和MatMomentDateModule的方法。 MatNativeDateModule默认接受ISO 8601格式。但由于你不想使用ISO格式，我建议使用MatMomentDateModule（Moment.js实现）。
当我们使用MatMomentDateModule时，日期对象不再是JavaScript Date对象，而是Moment.js instance（利用像format()这样的Moment js实例可用的方法）。使用Moment.js在Material Date Picker docs页面上提供了基本到中间的示例。此外，一旦您的日期是Moment.js实例，您可以覆盖MomentDateAdapter而不是本机日期适配器的方法（格式，解析。）。
您可能需要编写一个全新的适配器或使用时刻适配器。 @angular/material-moment-adapter:5.0.0-rc0。瞬间适配器使用momentjs并允许您更多地控制输出格式。
Moment还能够解析不同的输入格式。
NativeDateAdapter使用Intl API格式化输出日期。您可以尝试提供自定义的MAT_NATIVE_DATE_FORMATS实例，但我不确定这会给您带来多大的影响。
编辑
您目前正在使用角度/材质的2.0.0-beta12，它不适合基于5.0.0-rc0 / master的代码。代码库有变化，特别是2.0.0-beta12中没有的反序列化函数，这就是它没有被调用的原因。如果你不能更新到角度5，那么看看MatDatepickerInput.setValue/coerceDateProperty，它将日期设置为你的FormControl。
您可以调用此模块的发射器（例如，单击事件）并将绑定到此模块的模型更改为辅助模型。
首先导入时刻和设置格式。 https://momentjs.com/
import * as moment from 'moment';
setDateFormat(date) {
this.myDate = moment(date).format('YYYY/MM/DD HH:mm:ss');
}
你可以改变它的格式：
const Date = Date.replace(/-/g, '/')