我想使用物料日历作为范围内联日历来显示和插入日期范围。
当使用 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 支持日期范围。
但是这个“内联日期范围日历”我无法工作......
I found https://github.com/angular/components/issues/20697描述了相同的问题并找到了解决方案,但没有写下来,所以这没有帮助。
我也尝试了解 Angular Material Datepicker 的源代码,但不幸的是我仍然不明白。我将不胜感激任何帮助或提示。
建议的解决方案有很多额外的代码,更重要的是它对我不起作用。这是一个精简的工作版本。
HTML
<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);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)