Angular Material Date Range Picker Setting a Default Value

Question

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

From what you describe it seems that the issue is that the indexing of dates start from 0, that is, if you pass 1 for a month, it's February instead of January and so on, because January is 1. Can you create a Fiddle so we could try out the theory I have described? — Lajos Arpad
– Lajos Arpad, Commented Mar 8, 2021 at 9:13
I think i might've explained this a bit weird then, In essence the problem is that the default dateSelectors from Material have a [Value] Binding u can assign on the input and u can set values from there, So My plans really just to pass a value threw every-time, But I have n way to bind to the "Default" value on the range selector, I'll share the Orignal Fiddle's from Material themselves as my questions more related to the defualt Datepicker then it is of How do I assign From my values. — BeepBopImaRobot
– BeepBopImaRobot, Commented Mar 8, 2021 at 9:23

Eliseo · Accepted Answer · 2021-03-08 09:34:22Z

6

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))
    });

answered Mar 8, 2021 at 9:34

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BeepBopImaRobot Over a year ago

Interesting little quirk with this, When I add the Dates, It actually sets the Default values But I get: Attempted to open an MatDatepicker with no associated input. Errors When I try to open the calendar

Eliseo Over a year ago

Sorry, I don't understand you, If you want to show a month, you use the property startAt of the mat-date-range-picker, e.g. <mat-date-range-picker #picker [startAt]="mydate"></mat-date-range-picker>, if you don't want to use a FormGroup else two variables you can use [value] in the inputs: <input matStartDate placeholder="Start date" [value]="startDate"> (remember that the variables must be Date javascript object

BeepBopImaRobot Over a year ago

Apologies for explaining so terribly ill clarify, Binding the Starting values with the Range formGroup works 100%, I mistakenly removed the selector: [rangePicker]="dateRangePicker" On my Input so It couldnt find the Picker. I ended up using your [startAt] Suggestions Works perfectly i'd Just add the <mat-date-range-picker #picker [startAt]="mydate"></mat-date-range-picker> To the Answer Thank you tho! Works great

Collectives™ on Stack Overflow

Angular Material Date Range Picker Setting a Default Value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related