CODEWITHSUNDEEP
angulartypescriptangular14
Morningstar
Morningstar

Reputation: 11

autoClose, placement on ngbDatePicker is not working

    <input name="datepicker"
           class="form-control"
           ngbDatepicker
           #datepicker="ngbDatepicker"
           [autoClose]="'outside'" 
           [placement]="'bottom-right'" <Problem is here>
           [container]="'body'"
           (dateSelect)="onDateSelection($event)"
           [displayMonths]="2"
           [dayTemplate]="t"
           outsideDays="hidden"
           [startDate]="calendar.getToday()"
           style="display: none;">

If I don't use [placement], auto-close is working fine, which means that when I click outside the calendar window, it closes. However, if I use [placement], it's not working.

Angular 14 using "@ng-bootstrap/ng-bootstrap": "^13.1.1",

I have tried to change this in CSS by removing [placement] no help ref below

.input-group{
  &.datepicker-right{
    ngb-datepicker{
      left: inherit !important;
      right: 0px;
    }
  }
}

I have changed the position of [placement] in the input, but it is still not helpful.

I have tried 'autoclose' and 'placement' because I need the calendar to be on the right side, not the left side. I am expecting it to close automatically when I click outside the calendar, and the calendar should be on the right side.

Upvotes: 1

Views: 258

Answers (1)

Naren Murali
Naren Murali

Reputation: 58031

As per my analysis, I was not able to reproduce the issue on stackblitz, but I noticed you are setting an incorrect value for placement attribute.

check the placement property of docs

placement

The preferred placement of the datepicker popup, among the possible values.

The default order of preference is "bottom-start bottom-end top-start top-end"

Please see the positioning overview for more details.

Type: PlacementArray Default value: ['bottom-start', 'bottom-end', 'top-start', 'top-end'] — initialized from NgbInputDatepickerConfig service

Before:

...
[placement]="'bottom-right'" 
...

After:

...
[placement]="'bottom-end'" 
...

Alternative attempts to fix this can be

[placement]="['bottom-end']"

If its still not resolved, try to share the repo/stackblitz with the issue replicated for debugging!

example of working stackblitz

Upvotes: 0

Related Questions