如何在 Angular 中使用 mat-calendar 实现日期范围选择器

Question

我想在 Angular 中使用 mat-calendar 实现一个 Daterange 选择器。我无法以正确的方式实现它。谁能帮我解决这个问题。

我的html代码：

<mat-calendar [selected]="range"
[comparisonStart]="range.start"
[comparisonStart]="range.end"
(selectedChange)="onChange($event)"></mat-calendar>

我的 Ts 代码：

range: DateRange<Date>;
constructor(){}
ngOnInit(){
}
 onChange(event)
 {
  console.log(event);
 }

Answer 1

注意：mat 日期范围选择器仅适用于 Angular 10 及更高版本

*.component.html

<mat-form-field appearance="fill">
  <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-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

<button (click)="save()">Save</button>
<p>Selected range: {{range.value | json}}</p>

*.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  range = new FormGroup({
    start: new FormControl(),
    end: new FormControl()
  });
  constructor(){

  }
}

app.module.ts

import {MatDatepickerModule} from '@angular/material/datepicker';

示例：https://stackblitz.com/angular/dmojaobybmm?file=src%2Fapp%2Fdate-range-picker-forms-example.ts

Answer 2

我在这里关注https://github.com/angular/components/issues/20307#issuecomment-674040060

这是一个工作示例https://stackblitz.com/edit/components-issue-q9db1k。

如果你想要 Onchange 里面的代码，这里是我的代码

用逻辑处理：D 这是我的代码：

<mat-calendar #calendar [selected]="selectedDateCalendar" (selectedChange)="toggleStartDateDate($event, calendar)">

在 ts 中：只需声明开始， 结尾， 选择日期类型

toggleStartDateDate(date: any, calendar: any) {
const selected_date = moment(date).toDate()
if (this.selectDateType === "startDateAfter") {
  this.start = selected_date
  this.end = selected_date
  this.selectDateType = "startDateBefore"
} else {
  if (moment(date).isBefore(moment(this.start))) {
    this.start = selected_date
    this.end = selected_date
    this.selectDateType = "startDateBefore"
  } else {
    this.end = selected_date
    this.selectDateType = "startDateAfter"
  }
}
this.selectedDateCalendar = new DateRange(moment(this.start), moment(this.end))
calendar.updateTodaysDate()}

Answer 3

您必须提供范围选择策略才能使预览正常工作。

  providers: [
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: DefaultMatCalendarRangeStrategy,
    },
  ],

然后，您必须将Date 转换为DateRange。

  selectedDateRange: DateRange<Date>;

  _onSelectedChange(date: Date): void {
    if (
      this.selectedDateRange &&
      this.selectedDateRange.start &&
      date > this.selectedDateRange.start &&
      !this.selectedDateRange.end
    ) {
      this.selectedDateRange = new DateRange(
        this.selectedDateRange.start,
        date
      );
    } else {
      this.selectedDateRange = new DateRange(date, null);
    }
  }

<mat-calendar (selectedChange)="_onSelectedChange($event)"
              [selected]="selectedDateRange">
</mat-calendar>