mat-datepicker 以 MMM d 格式显示错误的日历

Question

我在 Angular 材料中有一个日期选择器输入字段，其格式为MMM d.现在我想将日历设置为坚持 2020 年，因为它甚至显示 2 月 29 日的闰年日期。我已经设法限制了输入的max和min，并将默认日期设置为Jan 1.但不知何故，日期选择器从日历中的选定日期中选择了错误的日期，并且还将0显示为可能的日期。

这是堆栈闪电战

任何帮助，不胜感激。

模板：

<mat-form-field>
<input matInput (dateChange)="change($event)" [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date"
[max]="maxDate" [min]="minDate" [value]="setDefault()">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp></mat-datepicker>
</mat-form-field>

元件：

import { Component, OnInit, Output, EventEmitter } from "@angular/core";
import { FormControl } from "@angular/forms";
import { MomentDateAdapter } from "@angular/material-moment-adapter";
import {
DateAdapter,
MAT_DATE_FORMATS,
MAT_DATE_LOCALE
} from "@angular/material";
import * as _moment from "moment";
import { default as _rollupMoment } from "moment";
import { DatePipe } from "@angular/common";
const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
parse: {
dateInput: "MMM d"
},
display: {
dateInput: "MMM d",
monthYearLabel: "MMM d",
dateA11yLabel: "LL",
monthYearA11yLabel: "MMMM d"
}
};
@Component({
selector: "app-datepicker1",
templateUrl: "./datepicker1.component.html",
styleUrls: ["./datepicker1.component.css"],
providers: [
DatePipe,
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE]
},
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
]
})
export class Datepicker1Component implements OnInit {
@Output() date1: EventEmitter<any> = new EventEmitter<any>();
date = new FormControl(moment());
minDate = new Date(2020, 0, 1);
maxDate = new Date(2020, 11, 31);
constructor(private datePipe: DatePipe) {}
ngOnInit() {}
change(dateEvent) {
this.date1.emit(dateEvent.value);
}
setDefault() {
let d = new Date("2020-01-01");
console.log(this.datePipe.transform(d, "MMM d"));
return this.datePipe.transform(d, "MMM d");
}
}

Answer 1

d

是星期几，0 是星期日，1 是星期一，直到 6 是星期六，你需要解决这个问题，对于你需要D的月份中的某一天。

它应该是：

display: {
dateInput: "MMM D",
//...           ^
}

当然，并相应地修复其他字段。