NgbDatepicker show months and years only

Question

I am developing an app using Bootstrap 4 components, powered by Angular 4, and i have trouble configuring the NgbDatepicker directive to show only the months and years, not the days - like for credit cards.

I want to select only the month and year, i don't care about choosing a specific day.

My input looks like this:

<input id="demodate" type="text" name="demodate" ngbDatepicker
#startDateDp="ngbDatepicker" [(ngModel)]="modelDate"/>

I tried all the properties listed for the directive listed here

https://ng-bootstrap.github.io/#/components/datepicker

but none of them seem to help me. Any ideas?

Answer 1

Well there is no native support for that, but you can help yourself with css and navigate event. It is not super-nice, but it is functional.

<ngb-datepicker (navigate)="dateNavigate($event)" [showWeekdays]="false" class="datepicker-only-month-select"></ngb-datepicker>

In your component you can catch the navigate event, which contains previous and new value:

dateNavigate($event: NgbDatepickerNavigateEvent) { console.log($event.next.month); console.log($event.next.year); ... // old value is contained in $event.current }

And finally in global scope CSS, you can hide the day calendar (and add more required styling):

.datepicker-only-month-select { border: 0 !important; .ngb-dp-months { display: none !important; } }

Answer 2

There is a request for that:

https://github.com/ng-bootstrap/ng-bootstrap/issues/1811

As of now (Feb/2020), this is not supported yet.