日期范围选择器位置错误

Question

我正在尝试在一个组件内调用 mat date-range-picker calendar ，这意味着我应该有一个组件菜单，从菜单组件调用组件离开，并且在菜单组件中我有 mat date range picker calendar。现在日历的位置，当我调用离开组件时，必须在菜单组件之后，因为我在 HTML 代码中就是这样写的。但日历显示在左上角。请帮忙。我尝试将其添加到 css 文件中。但对我没用。

@import '../../../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

         <div class ="calendar">
         <mat-date-range-input [rangePicker]="picker" 
         style="display:none">
         <input matStartDate matInput placeholder="Start date"/>
         <input matEndDate matInput placeholder="End date"/>
          </mat-date-range-input>
           <mat-date-range-picker  #picker  [opened]="true" 
           (closed)="openCalendar(picker)">
             </mat-date-range-picker>
           </div>

Answer 1

尝试从 mat-date-range-input 元素中删除 style="display:none"。这是我在您的代码中看到的唯一奇怪的事情。如果它不起作用，您可以尝试清理 css 文件并重新构建它。它可能继承了另一个更高级别的职位css。

日期范围选择器位置错误

Date Range Picker Position WRONG

html

angular-daterangepicker

angular