我正在尝试使用自定义 MAT_DATE_RANGE_SELECTION_STRATEGY 以角度实现日期选择器。它允许用户选择 14 天的范围。
使用下面的代码(直接取自角度文档)来实现自定义策略
@Injectable()
export class FourteenDayRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
constructor(private _dateAdapter: DateAdapter<D>) {}
selectionFinished(date: D | null): DateRange<D> {
return this._createFourteeDayRange(date);
}
createPreview(activeDate: D | null): DateRange<D> {
return this._createFourteeDayRange(activeDate);
}
private _createFourteeDayRange(date: D | null): DateRange<D> {
if (date) {
const start = this._dateAdapter.addCalendarDays(date, 0);
const end = this._dateAdapter.addCalendarDays(date, 13);
return new DateRange<D>(start, end);
}
return new DateRange<D>(null, null);
}
}
并将其注入到组件中,如下所示。
@Component({
selector: 'app-awesomecomponent',
templateUrl: './awesomecomponent.component.html',
styleUrls: ['./awesomecomponent.component.css'],
providers: [{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: FourteenDayRangeSelectionStrategy
}]
})
但是,当用户选择允许自定义日期范围复选框(如上图所示)时,我希望禁用自定义策略并允许用户选择任何日期范围。
我怎样才能实现这个功能?我假设,我们需要从组件中动态删除以下内容以允许选择任何日期。但是我不知道该怎么做。
providers: [{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: FourteenDayRangeSelectionStrategy
}]
请帮忙。