CODEWITHSUNDEEP
angulartypescriptangular-material
JSmith
JSmith

Reputation: 4808

How can I reset value of a date picker when using MatDateRangeSelectionStrategy?

I am using angular material's date picker and came accross this example

I've implemented the example with my own logic and everything worked great except the date is returned from the MatDateRangeSelectionStrategy class which is an injection token I guess (don't really know how that works) and this class only contains returns date range based on UI triggered events (The two events are selectionFinished and createPreview). When a date range is selected I couldn't find a way to reset it programmatically or via the DOM.

I've tried so far:

            <mat-form-field appearance="fill">
              <mat-label>Select a start date</mat-label>
              <mat-date-range-input [rangePicker]="picker">
                <input [value]="newStart"disabled="true" (dateChange)="startNewChanged($event.value)"  matStartDate placeholder="Start date">
                <input [value]="newEnd" disabled="true" matEndDate placeholder="End date">
              </mat-date-range-input>
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-date-range-picker #picker></mat-date-range-picker>
            </mat-form-field>

where newStart and newEnd are dates but this overrides the selected range. What could I do else?

Upvotes: 0

Views: 2497

Answers (1)

mGois
mGois

Reputation: 11

You can do this: set viewChild to your

<mat-date-range-input #dateRangeInput [rangePicker]="picker">

TS:

@ViewChild('dateRangeInput ') dateRangeInput: MatDateRangePicker<Moment>;

Them call this method:

this.pickerDR.select(undefined);

Upvotes: 1

Related Questions