angular - Material datePicker( Angular )中的多个日期选择

Question

我要求用户可以在日期选择器中选择多个日期。如何在 Angular Material 日期选择器中实现多个日期选择功能？



我通过 dateClass 尝试了这个。但是，每次选择日期后，日期选择器都会关闭。

这是我尝试过的

HTML代码:

<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>

typescript 代码:

dateClass = (d: Date) => {
    const date = d.getDate();

    // Highlight the 1st and 20th day of each month.
    return (date === 1 || date === 5 || date === 14 || date === 19 || date === 21 ) ? 'example-custom-date-class' : undefined;
}

Answer 1

您需要直接使用mat-calendar进行操作，可以将其包含在mat菜单中并放入div中，以避免“closed”，请参见

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu">
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar 
           (selectedChange)="select($event,calendar)" 
            [dateClass]="isSelected">
        </mat-calendar>
    </div>
</mat-menu>

我选择以yyyy-MM-dd(*)的方式将日期的值存储在字符串中，因此
进口:

import { Component,ViewEncapsulation} from "@angular/core";

TS代码:

daysSelected: any[] = [];
event: any;

isSelected = (event: any) => {
  const date =
    event.getFullYear() +
    "-" +
    ("00" + (event.getMonth() + 1)).slice(-2) +
    "-" +
    ("00" + event.getDate()).slice(-2);
  return this.daysSelected.find(x => x == date) ? "selected" : null;
};

select(event: any, calendar: any) {
  const date =
    event.getFullYear() +
    "-" +
    ("00" + (event.getMonth() + 1)).slice(-2) +
    "-" +
    ("00" + event.getDate()).slice(-2);
  const index = this.daysSelected.findIndex(x => x == date);
  if (index < 0) this.daysSelected.push(date);
  else this.daysSelected.splice(index, 1);

  calendar.updateTodaysDate();
}

最后，.css很简单:

.mat-calendar-body-cell.selected
{
  background-color:red!important;
  border-radius: 50%
}
.drop-calendar
{
  width:30rem
}

注意:不要忘记在组件中将封装设置为none:

encapsulation:ViewEncapsulation.None

更新为什么要使用ViewEncapsulation.styles.css中不使用其他方法
问题在于如何将颜色设置为所选日期。当我们在mat-calendar [dateclass]中使用时，我们创建一个函数，该函数接收日期(每月的每一天)作为参数，并返回带有所需类名的字符串。在代码中，如果日期在所选数组中，则该类为“已选择”。
但是如果我们不使用ViewEncapsulation.None或我们放入styles.css(或styles.scss)(**)，则不会考虑这一点。是的，必须以“全局”样式定义此样式。 (请记住，ViewEncapsulation.None不会使组件中定义的样式成为“全局”
注意:如果您使用ViewEncapsulation在“堆栈闪电”中“播放”。没有人记得您需要刷新堆栈闪电，因为样式会保留。
(**)记住在angular.json中包含在“样式”中

"styles": [
 "src/styles.scss"
],

您可以在stackblitz中看到
(*)您可以选择，例如存储所选日期的getTime()。这个想法是，您需要在“daysSelected”数组中找到它，否则，如果直接使用对象Date，则需要将日期中的年，月和日与该数组的元素进行比较。这使性能差。认为每次单击一次，函数“isSelected”被称为一个月有多少天。