Reputation: 73
I'm working on an Angular project using Angular Material's mat-datepicker and mat-date-range-picker. I want to modify the datepicker so that it remains open even after a date or date range is selected. By default, the datepicker closes once a selection is made, but I need it to stay open to allow users to make multiple selections without reopening the datepicker each time.
Could someone provide guidance or examples on how to achieve this behavior for both single date and date range selections? Any help or pointers would be greatly appreciated!
<ng-container *ngIf="!isRangePickerMode">
<input type="text" #dp (dateChange)="onDateChange($event)" [formControl]="serializedDate" [disabled]="disabled"
class="inputBox" [matDatepicker]="picker" readonly [placeholder]="dateFormatString" (click)="picker.open()"
(focus)="picker.open()" [required]="isRequired" />
<i *ngIf="isOpen" class="iconoir-xmark" (click)="clearDate()"></i>
<mat-datepicker [opened]="isOpen" [panelClass]="'custom-datepicker'" #picker (opened)="onDatePickerOpen()"
[calendarHeaderComponent]="DatePickerHeaderBarComponent" (closed)="onDatePickerClose()">
</mat-datepicker>
</ng-container>
<!-- Date Range Picker -->
<ng-container *ngIf="isRangePickerMode">
<mat-date-range-input [formGroup]="range" [rangePicker]="rangePicker" (click)="rangePicker.open()" readonly [disabled]="disabled">
<input readonly matStartDate formControlName="start" [placeholder]="dateFormatString" (dateChange)="onRangeChange($event)" [required]="isRequired">
<input readonly matEndDate formControlName="end" (dateChange)="onRangeChange($event)" [required]="isRequired">
</mat-date-range-input>
<mat-date-range-picker #rangePicker [opened]="isOpen" [panelClass]="'custom-datepicker'"
[calendarHeaderComponent]="DatePickerHeaderBarComponent" (opened)="onDatePickerOpen()"
(closed)="onDatePickerClose()">
</mat-date-range-picker>
<i *ngIf="isOpen" class="iconoir-xmark" [ngStyle]="{'margin-right': '8px'}" (click)="clearRange()"></i>
</ng-container>
Upvotes: 0
Views: 203