Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material Date Range Picker Setting a Default Value

Im trying to set the Default Month the Date-picker opens up on, Based on values ill be getting from a Calendar Event. E.G: You're on April you click to the next month on the calendar, when you select the date-picker it opens on May

I've looked around and a lot of the questions discuss the DatePicker but not the RangeSelector, How this is resolved usually(From what I can tell) is by:

//Adding a [Value] Bind to the Input and setting the Value
E.G 
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [value]="getTomorrow()">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

The mat-date-range-input doesn't have the [Value] Property

So Im not sure how to go about setting a "default: value on the range selector:

<mat-form-field appearance="fill">
  <mat-label>Click the Icon to select a Date</mat-label>
  <mat-date-range-input [formGroup]="range" >
       <input matStartDate formControlName="start" placeholder="Start date">
       <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
       <mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
       <mat-date-range-picker  #dateRangePicker></mat-date-range-picker>
                  
      <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
      <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>

The DatePicker: Link

The Solution I found on how to set the Normal Single Date Selector:

Link2

Note Im using the Range Selector So My Input field is different then that of the normal Basic datepicker. So I cant bind the same way using the [Value] Bind.

ShortVersion: I want to bind to the mat-date-range-input to set the Default Month it starts on

like image 976
BeepBopImaRobot Avatar asked Jul 19 '26 17:07

BeepBopImaRobot


1 Answers

it's just give value to the FormControls -If you use formGroups, not use value-, e.g.

  this.range = new FormGroup({
      start: new FormControl(new Date(2021, 1, 15)),
      end: new FormControl(new Date(2021, 2, 16))
    });
like image 99
Eliseo Avatar answered Jul 22 '26 09:07

Eliseo