CODEWITHSUNDEEP
angulardatepickerng-bootstrapweek-number
md-dev
md-dev

Reputation: 23

How can I adjust week numbering in Angular Bootstrap Datepicker?

By default the week numbering system for the Angular Bootstrap Datepicker is different than the one I need to be displayed. For example, May 7, 2021 is in WW18 by default but I need it to show as WW19. I can't find a way to adjust or override the week numbers in the docs.

<input type="text" formControlName="date" ngbDatepicker #d="ngbDatepicker" [showWeekNumbers]="true" [firstDayOfWeek]="7">
<button (click)="d.toggle()" type="button">
</button>

screen shot of calendar with week numbers highlighted

Thank you.

Upvotes: 2

Views: 993

Answers (1)

IAfanasov
IAfanasov

Reputation: 4993

Here is the demo on how to do it.

That's how the datepicker shows the week number:

<div *ngIf="showWeekNumbers" class="ngb-dp-week-number small text-muted">{{ i18n.getWeekNumerals(week.number) }}</div>


export class NgbDatepickerMonthView {

  constructor(public i18n: NgbDatepickerI18n) {}

}

So you can provide the implementation of the NgbDatepickerI18n with getWeekNumerals method following the custom logic you need.

Upvotes: 1

Related Questions