Angular Material DatePicker选择策略 - 如何获得选定日期范围的价值

Question

我正在尝试创建一个将显示一些信息的表。这些列将根据所选日期范围动态变化。

我正在使用日期范围选择器与自定义选择策略 来自Angular Material文档（ link ），但我不知道如何获得所选范围内每天的值。 这是其工作原理： stackblitz示例

我的代码与doc示例中的代码几乎相同：

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{}

任何形式的帮助都将不胜感激：)

Answer 1

只是偶然发现了同一问题，但可以找到一种方法。

我看到它的方式是您有2个选项，要么您像通过FormGroup在Angular Material文档中这样做，要么您只需双向绑定变量并在关闭上聆听即可。

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

在组件中，您可以在组件中收听并输出变量（在我的情况下输入变量）。

@Input() from !: Date;
@Input() thru !: Date;
changed(picker: MatDateRangePicker<any>) {
  console.log("changed");
  console.log(this.from);
  console.log(this.thru);
}

有有趣的编码！

编辑：删除了无用的样式内容。

edit2：变量 +澄清