12

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?

Noise A.
  • 121
  • 1
  • 1
  • 4

3 Answers3

3

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; } }

Lukas Jelinek
  • 2,337
  • 1
  • 19
  • 12
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.

Bruno Medeiros
  • 2,251
  • 21
  • 34
0

The existing implementation of https://ng-bootstrap.github.io/#/components/datepicker doesn't support choosing months + years - it is a date picker.

You might try opening a feature request in https://github.com/ng-bootstrap/ng-bootstrap/issues

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286