I am modifying a simple datepicker.
I would like to only have the Year dropdown (Month is not required).
I have tried to remove the Month dropdown by adding the css:
select.custom-select {
display: none;
}
Unfortunately this not only removes the Month dropdown but the Year also, see below:
Please see STACKBLITZ
You can add style to the first select
@Component({
selector: 'ngbd-datepicker-basic',
templateUrl: './datepicker-basic.html',
styles:[':host ::ng-deep select:first-child{display:none;}']
})
export class NgbdDatepickerBasic {
...
}
Reference: https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-kyjfjz
The best thing to use will be Datepicker from ngx-bootstrap.
Check out this link: https://valor-software.com/ngx-bootstrap/#/datepicker#min-mode
It has an option for display mode called min-mode, so you can't go beyond that.You can set min-mode to "year" in your case. Works beautifully!
You can use yyyy formate to only a year.Try below code.
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1,
minMode: 'year'
};
Working Demo http://plnkr.co/edit/0SPMYQ6ND7AOfZwDAFB8?p=preview
A simple solution will be to use css to hide the first select element inside ngb-datepicker-navigation-select using display:none
Working example : https://stackblitz.com/edit/angular-year-datepicker-ng-bootstrap-8ag1xe