Unable expend options of Years in the ng Bootstrap datepicker in Angular

Question

I am working in Angular 8 with ng Bootstrap Datepicker

I am getting limited range of Year in DatePicker box in year dorpdown

I am sharing my code

<div class="form-group">
                <div class="input-group">
                  <input class="form-control" formControlName="doj" (click)="(role == 'RS' || role == 'TSO') ? e.toggle({year: 1224, month: 2 , day:1}) : null" [readonly]="true" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker
                    #e="ngbDatepicker">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary calendar" (click)="(role == 'RS' || role == 'TSO') ? e.toggle() : null" type="button"></button>
                  </div>
                </div>
              </div>

I am sharing Picture also

Answer 1

You can change the limit of the dates available for navigation and selection using [minDate] and [maxDate] inputs. If you don't specify any of them, the year select box will display -10 and +10 years from currently visible month. That is why you are only seeing these years in your current dropdown.

You can set the mindate in the datepicker directive in your html to set the selectable years.

<ngb-datepicker [minDate]="{year: 2010, month: 1, day: 1}"
            [maxDate]="{year: 2048, month: 12, day: 31}"
            [markDisabled]="isDisabled">
</ngb-datepicker>

You can find more information here in the ng-bootstrap documentation