CODEWITHSUNDEEP
angularangular-material
DongBin Kim
DongBin Kim

Reputation: 1889

How to block the close event when selecting a date in angular material datepicker?

I'm trying to block the close event which closes the calendar when selecting a date in angular material datepicker.

I've tried like,

// template
<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker (closed)="onCalendarClose(picker)"></mat-datepicker>
</mat-form-field>

// component
onCalendarClose(picker: MatDatepicker<Date>): void {
  picker.open();
}

But this just literally reopens the calendar after closing it, which blinks the screen and shows back the calendar. So I'm wondering if I can block the close event upon selecting a date.

Update: I'm using Angular 8, Angular Material 8.1.4

Upvotes: 0

Views: 2188

Answers (4)

Shtykhnov
Shtykhnov

Reputation: 1

Use the _applyPendingSelection method to grab the selected value. The dateChange event fires on its request.

Upvotes: 0

Priyangee
Priyangee

Reputation: 1

        <mat-form-field appearance="fill" class=" p-0 down-cont"  style="
        font-family: 'SF Pro Text', 'Titillium web', sans-serif;
        font-size: 12px;min-width:180px;
        ">
            <mat-label>Enter a date range</mat-label>
            <mat-date-range-input [rangePicker]="rangePicker">
              <input matStartDate placeholder="Start date" [max]="date2"  (dateInput)="clickDate1
                ($event)"  (dateChange)="clickDate1($event)" [(ngModel)]="date1">
              <input matEndDate placeholder="End date"  [min]="date1" (dateInput)="clickDate2
                ($event)"  (dateChange)="clickDate2($event)" [(ngModel)]="date2">
            </mat-date-range-input>
            <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
            <mat-date-range-picker #rangePicker>
            <mat-date-range-picker-actions>

            <button mat-raised-button  matDateRangePickerApply (click)="addDate2()">Apply</button>
            <button mat-button matDateRangePickerCancel (click)="picker.close()">Cancel</button>
            </mat-date-range-picker-actions>
            </mat-date-range-picker>
        </mat-form-field>

Upvotes: 0

ilya.chepurnoy
ilya.chepurnoy

Reputation: 525

You have to override the .close() method in component:

picker.close = () => {};

But first save it, and then restore it in ngOnDestroy()!

Upvotes: 0

Ms.KV
Ms.KV

Reputation: 261

What material version you are using?Because this ability to output the closed event is in material 5.0.0-rc.1 .If you are not having this material version installed then update it with this version.

Upvotes: 1

Related Questions