Angular Material 6 日期选择器在同一组件中使用不同的格式

Question

我需要在一个组件视图的两个 mat 日期选择器字段中选择两种不同的日期格式（YYYY-MM-DD 和 YYYY-MM）。

我使用的是角度 6.0.3 和材质 6.4.7。

我使用 MAT_DATE_FORMATS 在应用程序模块中将日期选择器格式配置为 YYYY-MM-DD，它在全局范围内工作，但我需要在一些日期选择器字段中将此格式覆盖为 YYYY-MM，如我上面所写。不幸的是，我不知道如何才能实现这一目标。

请问你能帮帮我吗？

我的部分代码：

        import { Component, OnInit, ViewChild } from '@angular/core';
    import { FormGroup, FormControl } from '@angular/forms';

    @Component({
      selector: 'app-invoice-list',
      templateUrl: './invoice-list.component.html',
      styleUrls: ['./invoice-list.component.css']
    })
    export class InvoiceListComponent {

      filterForm: FormGroup;

      @ViewChild('month_picker') month_picker;

      constructor() {
        this.filterForm = new FormGroup({
          assigned_date_from: new FormControl(),
          assigned_date_to: new FormControl(),
          assigned_month: new FormControl(),
        });
      }
    }

<div class="container" [formGroup]="filterForm">
  <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start">
      <div fxFlex="32%">
        <mat-form-field>
            <input matInput [matDatepicker]="date_from_picker" (focus)="date_from_picker.open()" formControlName="assigned_date_from" placeholder="Date from">
            <mat-datepicker-toggle matSuffix [for]="date_from_picker"></mat-datepicker-toggle>
            <mat-datepicker #date_from_picker></mat-datepicker>
        </mat-form-field>
      </div>
      <div fxFlex="32%">
        <mat-form-field>
            <input matInput [matDatepicker]="date_to_picker" (focus)="date_to_picker.open()" formControlName="assigned_date_to" placeholder="Date to">
            <mat-datepicker-toggle matSuffix [for]="date_to_picker"></mat-datepicker-toggle>
            <mat-datepicker #date_to_picker></mat-datepicker>
          </mat-form-field>
      </div>

      <!-- In below input I want month year format - YYYY-MM - so different than default format in above fields -->
      <div fxFlex="32%">
          <mat-form-field>
              <input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" formControlName="assigned_month" placeholder="Month">
              <mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle>
              <mat-datepicker #month_picker></mat-datepicker>
            </mat-form-field>
        </div>
    </div>
</div>

Answer 1

http://brickydev.com/angular-material-datepicker-with-many-custom-date-formats/

我找到了这个链接，这个解决方案对我有用。

第 1 步：创建指令

ng generate directive customDateFormat

第2步：

import { Directive } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';

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

@Directive({
  selector: '[appCustomeDateFormats]',
  providers: [{ provide: MAT_DATE_FORMATS, useValue: FORMAT }],
})
export class CustomeDateFormatsDirective {
  constructor() {}
}

步骤 3：在模板中使用此指令。

     <mat-form-field class="example-full-width" appCustomeDateFormats>
            <mat-label>Start Date</mat-label>
            <input
              matInput
              [matDatepicker]="startDate"
              formControlName="from_date"
            />
            <mat-datepicker-toggle
              matSuffix
              [for]="startDate"
            ></mat-datepicker-toggle>
            <mat-datepicker touchUi #startDate></mat-datepicker>
          </mat-form-field>