版本 10 上的 Angular 材料日期选择器（日期范围功能）答案

【问题标题】：Angular material date picker (date range feature) on version 10版本 10 上的 Angular 材料日期选择器（日期范围功能）
【发布时间】：2020-10-25 01:56:03
【问题描述】：

Angular 团队发布了 Angular 版本 10，还更新了 Angular 材料，添加了 日期选择器 的新功能，我们中的许多人都使用了该功能等了这么久，日期范围！

今天我使用 saturn-datepicker，这是一个 npm 包，它也有一个 LINEAR 选项，如下例所示。

<sat-calendar
    [rangeMode]="true"
    (dateRangesChange)="inlineRangeChange($event)"
    #inlineRangePicker
>
</sat-calendar>

这会将日历放在页面上，无需单击即可在弹出窗口中打开日历；

在 Angular 材料中，可以像这样使用 mat-calendar 来做同样的事情。

<mat-calendar>
</mat-calendar>

我的问题是如何在 saturn-datepicker 中应用[rangeMode]="true" ??

【问题讨论】：

目前在文档中没有找到任何相关的东西。如果它不存在，他们可能会介绍它，我们可以以某种方式使用自定义逻辑来做到这一点。
我找到了使用材料日历的解决方案：stackoverflow.com/questions/67484281/…

标签： angular angular-material

【解决方案1】：

我刚刚查看了 MatCalendar 的最新源代码。它不支持范围 - 顾名思义，它是实现日历的单个控件。

DatePicker 组件（单日期对话框）基本上封装了一个 MatCalendar 使其成为一个对话框。

新的 DateRangePicker 组件同样封装了两个 MatCalender 实例，并在对话框中呈现它们。

因此，在这一点上，Material 似乎没有提供内联日期范围选择器。

我唯一能建议的是使用两个 MatCalender 实例创建您自己的组件，并查看 MatDateRangePicker 代码以了解如何处理两个日历之间的任何交互。

相关源码可以在https://github.com/angular/components/tree/master/src/material找到

【讨论】：

【解决方案2】：

恐怕这是不可能的，您需要使用 mat-calendar 本身。如果只需要一个月，您可以从此SO 删除“某些部分”。所以，date-picker-range.html 变成了

<div  class="drop-calendar" >
    <div  (click)="$event.stopPropagation()">
        <mat-calendar  class="calendar" #calendar (selectedChange)="select($event)"
             [dateClass]="setClass()" >
    </mat-calendar>
    </div>
</div>

去掉ngOnInit、ngAfterView、placeHolder...结果可见this stackblitz

使用更多的一个月是更复杂的，因为它不仅添加两个mat-calendar，而且“标题”必须改变。重新发明轮毂是可能的，但我不太确定这是个好主意

【讨论】：