Questions & Answers

I tried various way of transalting this code:

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

into something like this:

<mat-form-field appearance="fill">
  <mat-label>Start Date</mat-label>
  <input matStartDate formControlName="start" placeholder="Start date">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
<mat-form-field appearance="fill">
  <mat-label>End Date</mat-label>
  <input matEndDate formControlName="end" placeholder="End date">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
</mat-form-field>
<mat-date-range-picker #picker></mat-date-range-picker>

The objective was splitting the input into two but with the same Date Picker Range prompt.

I noticed that you must have only one datepicker linked to a unique input (1:1). I don't want to customize too much in the css.