How to allow calender to show more years?

1. Add datepicker_extend.js file in static resoource with name as datepicker_extend. You can download extend.js from this below link

download datepicker_extend.js

2. Create a component.

Component Name : DatePickerExtend

    $(function(){
        
        var PRELIMIT = parseInt("{!lowerLimit}");
        var POSTLIMIT = parseInt("{!higherLimit}");
        var startYear = parseInt("{!startYear}");
        var endYear =  parseInt("{!endYear}");
        
        if(!startYear && PRELIMIT){
            startYear = $("#calYearPicker option:first").val();            
            endYear = $("#calYearPicker option:last").val();
            if(PRELIMIT <= 100){
                for(var i = 1; i <= PRELIMIT; i++){
                     $("#calYearPicker").prepend("" + startYear + "");
                }
            }
            if(POSTLIMIT <= 100){
                for(var i = 1; i <= POSTLIMIT; i++){
                     $("#calYearPicker").append("" + endYear + "");
                }
            }
        }else{
            
            if(!endYear){
                startYear = $("#calYearPicker option:last").val();
            }
            if(endYear - startYear <= 300){
                $("#calYearPicker option").remove();
                for(var i = startYear; i <= endYear;){
                    $("#calYearPicker").append("" + i++ + "");
                }
            }
        }
    });

3. write this component before apex form tag.

Example :