CODEWITHSUNDEEP
angulardatepickerng-bootstrap
Ariel Falco
Ariel Falco

Reputation: 11

NgbDatepicker multiple months displays wrong days (always starts on monday)

I'm using NgbDatepicker (version 4.2.2) setting displayMonths = 2 but I'm getting the wrong days.

i.e : November ends on Saturday 30, but the next date displayed is Monday 1 instead on Sunday 1.

 <section class="popover-body">
    <!-- date picker-->
    <ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
    </ngb-datepicker>
  </section>


  <ng-template #t let-date let-focused="focused">
    <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)" [class.faded]="isHovered(date) || isInside(date)"
      (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
      {{ date.day }}
    </span>
  </ng-template>

Upvotes: 1

Views: 1132

Answers (3)

Ron Flores
Ron Flores

Reputation: 11

There is probably other CSS classess interfering with the ngb styles. Check your other css classess in your application and see if any of them are causing conflict.

Upvotes: 0

Gurlivleen Singh Kainth
Gurlivleen Singh Kainth

Reputation: 1

dateModel: NgbDateStruct;
let dateStr = `${this.dateModel.year}-${String(this.dateModel.month).padStart(2, '0')}-${String(this.dateModel.day).padStart(2, '0')}`
let weekDay = new Date(dateStr).toLocaleDateString("en-US", { weekday: 'long' })
console.log(weekDay);

You can use this approach to get correct weekday.

Upvotes: 0

anonymous
anonymous

Reputation: 21

just add css style , if ur using flex , justify-content: flex-end;

Upvotes: 2

Related Questions