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

【问题标题】：How to set two input fields by one datepicker如何通过一个日期选择器设置两个输入字段
【发布时间】：2019-07-04 14:57:11
【问题描述】：

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

    <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"，但我得到的只是第二个日期选择器正在为每个字段打开仍然单独设置它们的值。

【问题讨论】：

标签： html angular datepicker

【解决方案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;
}

【讨论】：

该方法根本没有被调用。
我只是猜测，我不知道你具体使用什么，但我说的是一般。希望其他人可以找到您正在寻找的活动，或者您可以自己找到。只需用适合该工作的替换（更改）即可！

【解决方案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>

【讨论】：