Angular Material Datepicker Selection Strategy - 如何获取所选日期范围的值答案

【问题标题】：Angular Material Datepicker Selection Strategy - how to get value of selected date rangeAngular Material Datepicker Selection Strategy - 如何获取所选日期范围的值
【发布时间】：2022-08-04 05:06:44
【问题描述】：

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

我在用着具有自定义选择策略的日期范围选择器来自 Angular Material Documentation (link)，但我不知道如何获取选定范围内的每一天的值。这是它的工作原理：StackBlitz Example

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

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

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

标签： angular typescript angular-material angular13 angular-material-datetimepicker

【解决方案1】：

只是偶然发现了同样的问题，但可以想办法。

在我看来，您有 2 个选项，您可以像在 Angular Material Documentation 中那样通过 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 style="display: none;" matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker style="display: none;" #picker (closed)="changed(picker)"></mat-date-range-picker>

在您的组件中，您现在可以收听并输出您的变量。

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

玩得开心编码！

【讨论】：