datepicker, place the window to the right

March 26, 2022

I use Angular 13, Bootstrap 5 and ngx-bootstrap-fix-datepicker version 5 for my project.

"bootstrap": "^5.1.3",
"ngx-bootstrap": "^8.0.0",
"ngx-bootstrap-fix-datepicker": "^5.6.8",

My problem: I would like to place the calendar to the right and reduce the window.
Do you think it’s possible? Because I have no idea.

datePicker – image

<div class="row row-cols-3 pt-3">
   <div class="col text-end">
      <label for="startDate" class="form-label">Date de départ</label>
   </div>
   <div class="col-4">
      <input type="text " class="form-control form-max-width " name="startDate " [(ngModel)]="startDate " bsDatepicker [maxDate]="endDate " [required]="!!endDate " autocomplete="off ">
   </div>
</div>

>Solution :

Update for angular:

You can add the placement property to your input tag like:

<input type="text " class="form-control form-max-width " name="startDate " [(ngModel)]="startDate " bsDatepicker [maxDate]="endDate " [required]="!!endDate " autocomplete="off " placement="right">

The other options you can use are "left | right | bottom | top"

Old answer:

You can all the following JavaScript to offset the top and left margin. Make sure to update the variable names to match your own.

$('input.date').datepicker({
    beforeShow: function(input, inst) {
        inst.dpDiv.css({
            marginTop: -input.offsetHeight + 'px', 
            marginLeft: input.offsetWidth + 'px'
        });
    }
});