How to prevent dropdown closing on selecting date from mat datepicker

Question

I am using bootstrap dropdown and mat date picker in that drop down. When I select the date from the mat date picker, the dropdown behind it closes. I want to keep the dropdown after selecting the date. We are using Angular 17

<li class="nav-item drop-wrapper">
            <div class="dropdown-menu gear-drop settings-menu" >
              <p class="text-center py-2 border-bottom setpsize">
                Settings Menu
              </p>
              <a class="dropdown-item">
                <div>
                  <div>
                    <form class="toggle-form" style="margin-left: 0px;">
                      My Calendar
    
                      <label class="switch" style="margin-left: 10px;">
                        <input
                        id="myCalCheckBox"
                          type="checkbox"
                          [checked]="myCalEnabled"
                          (change)="myCalEnableDisable()"
                        />
                        <span class="slider round" style="padding-left: 2px;"></span>
                      </label>
                    </form>
                  </div>
                  <div>
                    <mat-field>
                      <input matInput [matDatepicker]="picker1" placeholder="Start Date" [min]="scratchPadView?.minDateMyCal" [max]="scratchPadView?.maxDateMyCal" (dateChange)="myCalSelectedDate()" [(ngModel)]="myCalStartdate">
                      <mat-datepicker-toggle matSuffix [for]="picker1" (click)="open()"></mat-datepicker-toggle>
                      <mat-datepicker #picker1 [startAt]="myCalDefaultDate" touchUi="true"></mat-datepicker>
                      <input matInput [matDatepicker]="picker2" placeholder="End Date" [min]="scratchPadView?.minDateMyCal" [max]="scratchPadView?.maxDateMyCal" (dateChange)="myCalSelectedDate()" [(ngModel)]="myCalEndDate">
                      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                      <mat-datepicker #picker2 [startAt]="myCalDefaultDate"></mat-datepicker>
                    </mat-field>
                  </div>
                </div>
              </a>
            </div>
          </li>

I want to keep the dropdown after selecting the date.

Answer 1

<mat-form-field class="example-form-field">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="datepicker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
  <mat-datepicker #datepicker>
    <mat-datepicker-actions>
      <button mat-button matDatepickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
    </mat-datepicker-actions>
  </mat-datepicker>
</mat-form-field>

if this code use not close mat date picker until u click aply