Basic Year Picker For Text Input - YearPicker.js

YearPicker.js is a lightweight yet configurable year picker for jQuery that makes it easy to select a year from a popup similar to the date picker.

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

<link rel="stylesheet" href="yearpicker.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="yearpicker.js" async></script>

2. Add the class 'yearpicker' to the text field and we're done.

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

3. You can also apply the plugin to any text field you prefer.

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

4. All default options to customize the year picker.

$('.yearpicker').yearpicker({
  // Auto Hide
  autoHide: true,
  // 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',
  highlightedClass: 'highlighted',
  // 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 available.

$('.yearpicker').yearpicker({
  show: null,
  hide: null,
  pick: null
  
});

This awesome jQuery plugin is developed by saravanajd. For more Advanced Usages, please check the demo page or visit the official website.