[英]Angular Material Datepicker Selection Strategy - how to get value of selected date range
我正在尝试创建一个显示一些信息的表格。 这些列将根据所选日期范围动态变化。
我正在使用日期范围选择器和来自 Angular 材料文档( 链接)的自定义选择策略,但我不知道如何获取所选范围内的每一天的值。 它是这样工作的: StackBlitz 示例
我的代码与文档示例中的代码几乎相同:
HTML:
<div class="datepick">
<mat-form-field appearance="outline">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
.TS:
@Injectable()
export class FiveDayRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
constructor(private _dateAdapter: DateAdapter<D>) {}
selectionFinished(date: D | null): DateRange<D> {
return this._createFiveDayRange(date);
}
createPreview(activeDate: D | null): DateRange<D> {
return this._createFiveDayRange(activeDate);
}
private _createFiveDayRange(date: D | null): DateRange<D> {
if (date) {
const start = this._dateAdapter.addCalendarDays(date, -2);
const end = this._dateAdapter.addCalendarDays(date, 2);
return new DateRange<D>(start, end);
}
return new DateRange<D>(null, null);
}
}
@Component({
selector: 'app-table-view',
templateUrl: './table-view.component.html',
styleUrls: ['./table-view.component.css'],
providers: [{
provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
useClass: FiveDayRangeSelectionStrategy,
},
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
],})
export class TableViewComponent{}
任何形式的帮助将不胜感激:)
只是偶然发现了同样的问题,但可以想办法。
我看到它的方式有 2 个选项,要么像 Angular 材料文档中那样通过 FormGroup 进行操作,要么只是双向绑定一个变量并在关闭时收听。
<mat-date-range-input [rangePicker]="picker">
<input [(ngModel)]="this.from" matStartDate placeholder="Start date">
<input [(ngModel)]="this.thru" matEndDate placeholder="End date">
</mat-date-range-input>
以及您与密切听众一起放入选择器的某个地方...
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker (closed)="changed(picker)"></mat-date-range-picker>
在您的组件中,您现在可以收听 output 您的变量(在我的情况下为输入变量)。
@Input() from !: Date;
@Input() thru !: Date;
changed(picker: MatDateRangePicker<any>) {
console.log("changed");
console.log(this.from);
console.log(this.thru);
}
玩得开心编码!
编辑:删除无用的风格的东西。
EDIT2:变量+澄清
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.