如何使用 Material Angular 設置多選日歷？

Question

我有一個日歷，但我只能設置一個日期，我希望能夠設置多個日期。 我在官方文檔 ( https://material.angular.io/components/datepicker/overview ) 中沒有看到任何內容，我被卡住了。

我的代碼是

TS：

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>