如何对齐 ngx-bootstrap 日期选择器

Question

我想自定义 ngx-bootstrap 日期选择器。 我想对齐输入的左/右，但它不起作用。

<div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [bsConfig]="{ adaptivePosition: true }">
  </div>

现在它像这样工作

但我想要这样的东西

我找不到任何方法来自定义日期选择器。 任何人都可以帮助解决这个问题。

Answer 1

使用placement 属性来对齐日期选择器。 您可以单独使用placement属性安全地删除adaptivePosition和位置。

<input type="text"
       placeholder="Datepicker"
       class="form-control"
       bsDatepicker
       placement="bottom right">

Answer 2

   // placement="top" -- add this
    
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           placement="top">


options are : "left" | "right" | "top" | "bottom"

Answer 3

正如 Falcon 所提到的，我无法使用 Johns Mathew 解决方案来做到这一点，因为placement="bottom right"不是一个有效的选项。 我所做的是将日期选择器包装在一个容器中并做了一些小解决方法：

<div class="input-group datepicker-right"> <-- Container
     <input type="text" #dpData="bsDaterangepicker" bsDaterangepicker>
     <a class="input-group-text" (click)="showCalendar(dpData)">
       <i class="la la-calendar"></i>
     </a>
</div>

我创建了一个 CSS 类：

.datepicker-right bs-daterangepicker-container {
   top: 33px !important; /* Height of my input */
   left: unset !important;
   transform: none !important;
   right: 0px !important;
}

瞧！