How to set two input fields by one datepicker

Question

The aim is to fill two input fields at once. Have a look at my code:

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

The both fields are being filled with dates choosen in datepickers. Now, what I try to achieve is when a date is choosen in the first datepicker both dates are set to it's value (the same value) but when the second one is set only those is changed, so you can pick one-day-data-ranges with half effort. Is it even possible? I've played around with [matDatepicker]="startDate && endDate" , [for]="startDate && endDate" but all I got was the second datepicker was being opened for each field still setting their values separetly.

Answer 1

In order for the second to change when the first one changes, you can add an event listener to the component to run a function when it changes.

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

Then in your typescript, onStartDateChange should look something like this

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

Answer 2

Actually I managed to find a solution in official material documentation (see Datepicker selected value in examples) and all there was to do was to add [value]="serviceOrderForm.get('SaleDate').value" to the second input. It works like a charm!

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