如何使用角度材料实现范围内联日历？

Question

我想使用物料日历作为范围内联日历来显示和插入日期范围。当使用 mat-date-range-picker 时，这只是工作（但不是内联）。使用 mat-calendar 时，它适用于内联，但不适用于范围。但是，如果我将 selectedRangeValue 作为 DateRange 而不是 Date 传递，则范围将正确显示。

唯一还缺少的就是输入...

这是我现在使用的代码（缩写）：

<mat-calendar (selectedChange)="selectedRangeChange($event)"
              [selected]="selectedRangeValue"
>
</mat-calendar>

selectedRangeValue: DateRange<Date> =  new DateRange<Date>(this.selectedValue.begin, this.selectedValue.end);

我必须这样做，因为 Saturn Date picker 仅在 Angular 9 之前受支持，并且从 Angular 10 开始，Material Datepicker 支持日期范围。但是这个“内联日期范围日历”我无法工作......

我发现https://github.com/angular/components/issues/20697描述了相同的问题并找到了解决方案，但没有写下来，所以这没有帮助。

我也尝试了解 Angular Material Datepicker 的源代码，但不幸的是我仍然不明白。我将不胜感激任何帮助或提示。

Answer 1

建议的解决方案有很多额外的代码，更重要的是它对我不起作用。这是一个精简的工作版本。

超文本标记语言

<mat-calendar [selected]="selectedRangeValue"
  (selectedChange)="selectedChange($event)">
</mat-calendar>

TS

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DateRange } from '@angular/material/datepicker';

@Component({
    selector: 'inline-range-calendar',
    templateUrl: './inline-range-calendar.component.html',
})
export class InlineRangeCalendarComponent {

    @Input() selectedRangeValue: DateRange<Date> | undefined;
    @Output() selectedRangeValueChange = new EventEmitter<DateRange<Date>>();

    selectedChange(m: any) {
        if (!this.selectedRangeValue?.start || this.selectedRangeValue?.end) {
            this.selectedRangeValue = new DateRange<Date>(m, null);
        } else {
            const start = this.selectedRangeValue.start;
            const end = m;
            if (end < start) {
                this.selectedRangeValue = new DateRange<Date>(end, start);
            } else {
                this.selectedRangeValue = new DateRange<Date>(start, end);
            }
        }
        this.selectedRangeValueChange.emit(this.selectedRangeValue);
    }

}