如何使用 Material Angular 设置多选日历？

Question

我有一个日历，但我只能设置一个日期，并且我希望能够设置多个日期。我在官方文档中没有看到任何内容（https://material.angular.io/components/datepicker/overview），我被卡住了。

我的代码是这样的

T：

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-inline-calendar-example',
  templateUrl: 'datepicker-inline-calendar-example.html',
  styleUrls: ['datepicker-inline-calendar-example.css'],
})
export class DatepickerInlineCalendarExample {
  selected: Date | null;
}

和 HTML

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
<p>Selected date: {{selected}}</p>

在 HTML 中，我可以设置范围选择器，但我不知道如何选择多个日期。谢谢

Answer 1

您必须使用日期范围选择，例如（如文档中提到的）：

 <mat-date-range-input [rangePicker]="picker">
  <input matStartDate placeholder="Start date">
  <input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-date-range-picker #picker></mat-date-range-picker>

Answer 2

这对我有用。我遇到了完全相同的问题。

HTML：

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

TS：

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DateRange } from '@angular/material/datepicker';

@Component({
    selector: 'inline-range-calendar',
    templateUrl: './inline-range-calendar.component.html',
})
export class InlineRangeCalendarComponent {

    @Input() selectedRangeValue: DateRange<Date> | undefined;
    @Output() selectedRangeValueChange = new EventEmitter<DateRange<Date>>();

    selectedChange(m: any) {
        if (!this.selectedRangeValue?.start || this.selectedRangeValue?.end) {
            this.selectedRangeValue = new DateRange<Date>(m, null);
        } else {
            const start = this.selectedRangeValue.start;
            const end = m;
            if (end < start) {
                this.selectedRangeValue = new DateRange<Date>(end, start);
            } else {
                this.selectedRangeValue = new DateRange<Date>(start, end);
            }
        }
        this.selectedRangeValueChange.emit(this.selectedRangeValue);
    }

}