Question

目的是一次填写两个输入字段。看一下我的代码：

    <mat-form-field>
      <input
        matInput
        [matDatepicker]="startDate"
        formControlName="SaleDate"
      />
      <mat-datepicker-toggle
        matSuffix
        [for]="startDate"
      ></mat-datepicker-toggle>
      <mat-datepicker #startDate></mat-datepicker>
    </mat-form-field>
    <mat-form-field>
      <input
        matInput
        [matDatepicker]="endDate"
        formControlName="ExportDate"
      />
      <mat-datepicker-toggle
        matSuffix
        [for]="endDate"
      ></mat-datepicker-toggle>
      <mat-datepicker #endDate></mat-datepicker>
    </mat-form-field>

两个字段都填充有在日期选择器中选择的日期。现在，我尝试实现的是在第一个日期选择器中选择一个日期时，两个日期都设置为它的值（相同的值），但是当第二个日期设置时，只有那些日期被更改，因此您可以选择一个一日数据范围内，只需花费一半的精力。可能吗我玩过[matDatepicker]="startDate && endDate"，[for]="startDate && endDate"，但我得到的只是打开了第二个日期选择器，每个字段仍单独设置其值。

Answer 1

为了使第二个在第一个变化时发生变化，可以在组件上添加事件侦听器以在其发生变化时运行功能。

<mat-form-field>
  <input
    matInput
    [matDatepicker]="startDate"
    formControlName="SaleDate"
    (change)="onStartDateChange"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="startDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <input
    matInput
    [matDatepicker]="endDate"
    formControlName="ExportDate"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="endDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

然后在您的打字稿中，onStartDateChange应该看起来像这样

onStartDateChange() {
    this.endDate = this.startDate;
}

Answer 2

实际上，我设法在official material documentation中找到了一个解决方案（请参阅示例中的 Datepicker选择值），而要做的就是将[value]="serviceOrderForm.get('SaleDate').value"添加到第二个输入中。就像魅力一样！

<mat-form-field>
  <input
    matInput
    [matDatepicker]="startDate"
    formControlName="SaleDate"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="startDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <input
    matInput
    [matDatepicker]="endDate"
    formControlName="ExportDate"
    [value]="serviceOrderForm.get('SaleDate').value"
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="endDate"
  ></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

如何通过一个日期选择器设置两个输入字段

2 个答案: