menu

Questions & Answers

Is there a way to split into 2 inputs the Date Picker Range of Material?

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.

Comments:
2023-01-18 08:42:03
use separate template variables i.e. [for]="picker1", #picker1 and [for]="picker2", #picker2
2023-01-18 08:42:03
@AndrewAllen in this case you won't be able to use the mat-date-range-picker to select both from and to dates. It's important From a UX prospective .
2023-01-18 08:42:03
Then I'm lost. What does splitting the input into two mean? Please update question to clarify
Answers(0) :