How to align ngx-bootstrap datepicker

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"