NgbDatepicker only shows months and years
I am developing an application using Bootstrap 4 components running Angular 4 and I am having a hard time configuring the NgbDatepicker directive to only show months and years, not days - like for credit cards.
I only want to select the month and year, I do not 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 mentioned here.
https://ng-bootstrap.github.io/#/components/datepicker
but none of them seem to be helping me. Any ideas?
source to share
The existing implementation https://ng-bootstrap.github.io/#/components/datepicker does not support month + year picking - it is date picker.
You can try opening feature request at https://github.com/ng-bootstrap/ng-bootstrap/issues
source to share
Well, there is no built-in support for this, but you can help yourself with CSS and navigate
event. It's not super nice, but it's functional.
<ngb-datepicker (navigate)="dateNavigate($event)" [showWeekdays]="false" class="datepicker-only-month-select"></ngb-datepicker>
In your component, you can catch the navigation event that contains the previous and new value:
dateNavigate($event: NgbDatepickerNavigateEvent) { console.log($event.next.month); console.log($event.next.year);...//old value is contained in $event.current }
Finally, in the global CSS scope, you can hide the calendar of the day (and add more styling as needed):
.datepicker-only-month-select { border: 0 !important;.ngb-dp-months { display: none !important; } }
source to share