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’.

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


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'
 });
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by saravanajd. Visit their official github repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.