1

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

enter image description here

ANURAG RANJAN
  • 115
  • 2
  • 16

1 Answers1

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

Mikey123
  • 1,201
  • 2
  • 12
  • 23