如何对齐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>

现在它的工作方式是这样的

但我想要像这样的东西

我找不到自定义日期选择器的方法。有人能帮忙解决这个问题吗？

- k.ch25

---

我有类似的问题 - 日期选择器的左边缘超出了屏幕 - https://imgur.com/a/t8m9ST7 - Jay Cummins

Answer 1

使用placement属性对日期选择器进行对齐。您可以安全地删除adaptivePosition并仅使用placement属性进行定位。

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

- Johns Mathew

---

这解决了我的问题，应该标记为答案。 - Kayes

它可以工作，但编译器返回 TypeScript 错误信息： error TS2322: Type '"bottom right"' is not assignable to type '"left" | "right" | "top" | "bottom"'. 有什么办法可以修复或避免这个错误吗？我正在使用 Angular 9 和 ngx-bootstrap 5.6.1，文档只提到了 top/bottom/left/right 的位置。 - Falcon

无法同时使用“bottom”和“right”（尝试使用版本5.0.0） - Anh-Thi DINH

Answer 2

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


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

- Shashwat Gupta

Answer 3

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

<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;
}

瞧！

- Geovani Anholete