Simple jQuery Year Picker Plugin

Today I am going to share a custom picker for select only years. If you need only year picker for your website where user can choose any year then this plugin is for you. 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.

jquery-year-picker-plugin

Libraries

Include following libraries on page.

<link rel="stylesheet" href="yearpicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>
<script src="yearpicker.js" async>script>

HTML

Create a simple html input field and Add the class ‘yearpicker’.

JS

You can also apply call the plugin to any text field you need.

$(function() {  
  $('.yearpicker').yearpicker();
});

Here is the list of options you can use to customize year picker.

$(function() {  
  $('.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'
 });
});