时间戳

首页 > 解决方案 > mat-datepicker 以 MMM d 格式显示错误的日历

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

问题描述

我在 Angular 材料中有一个 datepicker 输入字段，格式为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");
  }
}

标签： angularangular-material

解决方案

这d是一周中的哪一天，0 是星期日，1 是星期一，直到 6 是星期六，你需要在你需要的月份中修复它D。

它应该是：

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

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

推荐阅读