Material datePicker（Angular）中的多个日期选择

Posted 2023-05-07

【中文标题】Material datePicker（Angular）中的多个日期选择

【英文标题】：Multiple Date Select in Material datePicker (Angular)

【发布时间】：2020-03-26 18:34:51

【问题描述】：

我要求用户可以在日期选择器中选择多个日期。如何在 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>

打字稿代码：

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;

【问题讨论】：

检查这个 - npmjs.com/package/multiple-date-picker-angular

也许你需要寻找一些替代方法来通过 mat 日期选择器选择多个日期，因为这里没有提到这样的功能 -> material.angular.io/components/datepicker/overview

感谢您的回复。在材料日期选择器中有没有其他方法可以做到这一点。

【参考方案1】：

您需要直接使用 mat-calendar，您可以将其包含在 mat 菜单和 div 中以避免“关闭”，请参阅

<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

更新为什么在styles.css中使用ViewEncapsulation.None和其他方法

问题是如何将颜色添加到所选日期。当我们在 mat-calendar [dateclass] 中使用时，我们创建了一个函数，它接收日期（每月的每一天）作为参数，并返回一个带有您想要的类名称的字符串。在代码中，如果日期在选定的数组中，则该类为“选定”。

但是，如果我们不使用 ViewEncapsulation.None 或者我们放入 styles.css（或 styles.scss）（**），这不考虑在内。是的，这种风格必须以“全局”风格定义。 （请记住 ViewEncapsulation.None 使组件中定义的样式变为“全局”

注意：如果您使用 ViewEncapsulation.None 在 stackblitz 中“玩”，请记住您需要刷新 stackblitz，因为样式仍然保存。

(**) 记得在 angular.json 中包含在“styles”中

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

你可以在stackblitz看到

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

【讨论】：

你成功了！好一个:)

@PrashantPimpale，感谢您的正确，我刚刚删除了不必要的导入和变量

感谢@Eliseo。您的解决方案对我很有帮助，解决了我的问题。

使用encapsulation:ViewEncapsulation.None后，我所有的风格都受到了影响。有什么简单的解决方案吗？如果我使用::ng-deep 上面的代码在不使用encapsulation:ViewEncapsulation.None 的情况下工作，但另一个问题是::ng-deep 被贬低了。 :(

@Arthez，我尝试在更新的答案中进行解释。基本上你需要把类“全局”。您也可以简单地更改styles.css（或styles.scss）并忘记ViewEncapsulation.None

【参考方案2】：

另一种方式（有点黑客）：StackBlitz

只是临时将close方法重写为空函数，并在更改后将其返回。 还调用工作日重新渲染功能。 不是安全和理想的解决方案，但有效。

可能对某人有用。

UPD： 或者，您可以使用ngx-multiple-dates 包。 There are some examples of it.

【讨论】：

或者，您可以使用ngx-multiple-dates 包。 There are some examples of it.