Angular 輸入字段的日期選擇器缺點

Question

當我試圖打開 angular 材料日期選擇器時，它打開了輸入字段的上方。 如何讓它打開輸入字段的下行。

<mat-form-field appearance="outline" class="w-100 date-class">
          <mat-label class="required">End Date</mat-label>
          <input
            matInput
            [matDatepicker]="picker2"
            (dateChange)="onEndDateChange($event)"
            [min]="todayDate"
            formControlName="toDate"
            readonly
          />
          <mat-datepicker-toggle matPrefix [for]="picker2"></mat-datepicker-toggle>
          <mat-datepicker #picker2 yPosition="below"></mat-datepicker>
</mat-form-field>

Answer 1

如果您想控制放置的位置，您可以使用以下參數：DatepickerDropdownPositionX、DatepickerDropdownPositionY ( https://material.angular.io/components/datepicker/api )

 type DatepickerDropdownPositionY = 'above' | 'below';