具有 Moment 日期格式的 Angular 6 matDatepicker

Question

需要一些有关 Angular 6 matDatepicker Moment 的帮助。有两个日期选择器，一个用于 MM/YYYY，另一个用于 DD/MM/YYYY。所以问题是当我选择第二个日期时，我在输入字段中得到 MM/YYYY 而不是 DD/MM/YYYY。开发教程/信息来自：https://material.angular.io/components/datepicker/overview

import {FormControl} from '@angular/forms';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';
import * as _moment from 'moment';
import { default as _rollupMoment, Moment } from 'moment';
const moment = _rollupMoment||_moment;
export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};
@Component({
  selector: 'myselector',
  templateUrl: 'my.html',
  styleUrls: ['my.css'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
date = new FormControl(moment()); //for first datepicker
generalStartDate = new Date(new Date().getFullYear(), 0, 1);//for second datepicker

Answer 1

您必须为日期选择器 2 创建自定义日期选择器格式

我认为DEMO对你有帮助。

演示 -----> multi-format-date-picker

HTML：

主要形式：

 <app-datepicker1 (date1)="catchDate1($event)"></app-datepicker1>
<app-datepicker2 (date2)="catchDate2($event)"></app-datepicker2>

TS;

 date1 : Date ;
  date2 : Date ;

  catchDate1(event) {
    this.date1 = event;
  }

  catchDate2(event) {
    this.date2 = event;
  }

日期格式 2：

export const MY_FORMATS2 = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};