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

Question

I want to customize the ngx-bootstrap datepicker. I want to align left/right side of my input, but it doesn't work.

<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

I couldn't find any way to customize the datepicker. Can anyone help with this problem.

Answer 1

Use the placement property to align the datepicker. You can safely remove the adaptivePosition and position using the placement property alone.

<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

I couldn't do it with Johns Mathew solution because placement="bottom right" is not a valid option, as Falcon mentioned. What I did was wrap the datepicker in a container and did some little workaround:

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

And I created a css class:

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

And voilà!