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

【问题标题】：How to align ngx-bootstrap datepicker如何对齐 ngx-bootstrap 日期选择器
【发布时间】：2019-08-20 18:29:26
【问题描述】：

我想自定义 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>

Now it works like this

But I want something like that

我找不到任何自定义日期选择器的方法。谁能帮忙解决这个问题。

【问题讨论】：

我有类似的问题——日期选择器的左边缘不在屏幕上——imgur.com/a/t8m9ST7

标签： angular datepicker customization ngx-bootstrap

【解决方案1】：

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

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

【讨论】：

这解决了我的问题，应该标记为答案。
它正在工作，但编译器返回 typescript 错误并显示消息：error TS2322: Type '"bottom right"' is not assignable to type '"left" | "right" | "top" | "bottom"'. 知道如何修复/避免此错误吗？我正在使用 angular 9 和 ngx-bootstrap 5.6.1，文档仅提及顶部/底部/左侧/右侧位置。
不能同时使用“bottom”和“right”（5.0.0版本尝试）

【解决方案2】：

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


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

【讨论】：

【解决方案3】：

我无法使用 Johns Mathew 解决方案，因为正如 Falcon 所提到的，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;
}

瞧！

【讨论】：