How to make use of it:

1. Add jQuery library along with the yearpicker.css and yearpicker.js to the web page.

<link rel="stylesheet" href="yearpicker.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="yearpicker.js" async></script>

2. Add the category ‘yearpicker’ to the textual content area.

<input type="text" class="yearpicker" value="">

3. Apply the plugin to the year picker input and accomplished.

$('.yearpicker').yearpicker();

4. All default choices to customize the year picker.

$('.yearpicker').yearpicker({

  // Initial Year
  year: null,

  // Start Year
  startYear: null,

  // End Year
  endYear: null,

  // Element tag
  itemTag: 'li',

  // Default CSS classes
  selectedClass: 'selected',
  disabledClass: 'disabled',
  hideClass: 'hide',

  // Custom template
  template: `<div class="yearpicker-container">
              <div class="yearpicker-header">
                  <div class="yearpicker-prev" data-view="yearpicker-prev">&lsaquo;</div>
                  <div class="yearpicker-current" data-view="yearpicker-current">SelectedYear</div>
                  <div class="yearpicker-next" data-view="yearpicker-next">&rsaquo;</div>
              </div>
              <div class="yearpicker-body">
                  <ul class="yearpicker-year" data-view="years">
                  </ul>
              </div>
          </div>
  `,
  
});

5. Event handlers.

$('.yearpicker').yearpicker({

  onShow: null,
  onHide: null,
  onChange: function(value){}
  
});

Basic Year Picker For Text Input, YearPicker Plugin/Github, jquery datepicker-year only

See Demo And Download