Angular：Material Datepicker：月视图中的日期范围选择

Answer 1

我们可以结合 Angular 材料 - datepicker 中的两个示例。

Datepicker emulating a Year and month picker

和

Basic date range picker

。

我们可以合并它们，所以你需要

provideMomentDateAdapter

来显示

MM/YYYY

格式。

此外，我们在 HTML 中有

startView

，这对

year

非常有用，但对

month

不起作用，这可能是一个错误，您可以提出 github 问题来验证。

HTML：

<mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date" />
    <input matEndDate formControlName="end" placeholder="End date" />
  </mat-date-range-input>
  <mat-hint>MM/YYYY – MM/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker startView="multi-year" #picker></mat-date-range-picker>

  @if (range.controls.start.hasError('matStartDateInvalid')) {
  <mat-error>Invalid start date</mat-error>
  } @if (range.controls.end.hasError('matEndDateInvalid')) {
  <mat-error>Invalid end date</mat-error>
  }
</mat-form-field>

<p>Selected range: {{range.value | json}}</p>

TS：

import { JsonPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
} from '@angular/forms';
import { provideNativeDateAdapter } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';

import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import { default as _rollupMoment, Moment } from 'moment';
import { MatInputModule } from '@angular/material/input';
import { provideMomentDateAdapter } from '@angular/material-moment-adapter';

const moment = _rollupMoment || _moment;
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Date range picker forms integration */
@Component({
  selector: 'date-range-picker-forms-example',
  templateUrl: 'date-range-picker-forms-example.html',
  providers: [
    // Moment can be provided globally to your app by adding `provideMomentDateAdapter`
    // to your app config. We provide it at the component level here, due to limitations
    // of our example generation script.
    provideMomentDateAdapter(MY_FORMATS),
  ],
  imports: [
    MatFormFieldModule,
    MatDatepickerModule,
    FormsModule,
    ReactiveFormsModule,
    JsonPipe,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DateRangePickerFormsExample {
  readonly range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });
}

Stackblitz 演示