Question

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"？

Answer 1

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

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

新的DateRangePicker组件类似地封装了两个MatCalender实例，并将它们显示在对话框中。

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

我唯一可以建议的就是用两个MatCalender实例创建自己的组件，然后查看MatDateRangePicker代码以查看如何处理两个日历之间的任何交互。

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

中找到

Answer 2

恐怕这是不可能的，您需要使用垫日历本身。如果只需要一个月，则可以从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，而且“ header”也必须更改。有可能重新发明焊缝，但我不确定这是个好主意

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

2 个答案: