Angular ng-pick-datetime 使输入字段不可见

Question

我正在使用带日期时间范围的 ng-pick-datetime 以及一些输入字段和日期时间选择器（日历）图标：

<div class="dl-date-time-picker">
    Date Time:    
          <input           
                [style.width]="'200px'"
                [(ngModel)]="dateTimeRange"
                (ngModelChange)="getrange($event)"
                [selectMode]="'range'"
                [owlDateTimeTrigger]="dt" 
                [owlDateTime]="dt">

          <span class="trigger" [owlDateTimeTrigger]="dt">
            <i class="fas fa-calendar-alt"></i>
          </span>    
          <owl-date-time #dt></owl-date-time>        
</div>

它看起来很正常，并且日历项目打开正确对齐在图标下...

但是现在，我想让输入字段对用户不可见，并且只提供日历选择器图标...

我使用了 <input type="hidden" 并且目前有效，我现在遇到的问题是，日历项目在我浏览器的最左侧打开 window...我不知道不知道如何解决该问题：

我该如何解决这个问题，它太靠左了...

Answer 1

显然，日期时间选择器需要输入字段来确定屏幕上的正确位置。您可以通过 CSS 隐藏输入，然后它应该可以工作：

.dl-date-time-picker > input {
    visibility: hidden;
    width: 0;
}

Angular ng-pick-datetime 使输入字段不可见

Angular ng-pick-datetime make input field invisible

datetimepicker

angular