【问题标题】:Date Range Picker Position WRONG日期范围选择器位置错误
【发布时间】:2021-07-01 20:59:54
【问题描述】:

我试图在一个组件中调用 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>

【问题讨论】:

  • 请@Shruti Jain,你能放一段代码吗?如果你不分享你的代码,就很难提供一些帮助......
  • 嗨,我已经添加了我在离开组件中使用的代码,它位于菜单组件内。所以基本上层次结构 c app->menu->leave

标签: html angular angular-daterangepicker


【解决方案1】:

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

【讨论】:

  • 谢谢,Roberto 是的,它解决了一半的问题,现在我的日历没有随着页面滚动,但它还没有处于正确的位置。
  • 尝试删除添加到 CSS 中的行。我的意思是这个:@import '../../../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';
  • angular-ivy-qfsvyu.stackblitz.io,请检查@Roberto
  • 我想做的是始终打开选择器,但是一旦我再次单击离开按钮,就会关闭选择器。但选择器当时也保持打开状态
猜你喜欢
  • 1970-01-01
  • 2014-08-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-08
  • 1970-01-01
相关资源
最近更新 更多