Year Picker jQuery plugin

1. Introduction

YearPicker is a lightweight jQuery plugin for year picker. The plugin can be attached to any input element on the website and fires when the user focuses a cursor in that specific field. Year picker pops up just like calendar picker with the only year to select. Users can navigate years with next/prev buttons and choose the specified year. YearPicker is easy to customize with CSS and integrate, it also comes with many configuration options.

Year picker jquery plugin

2. Plugin Overview

Library	Year Picker
Author	Saravanan
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version and Moment.js 2.24.0

Demo

3. How to install and use YearPicker jQuery plugin

Follow below steps to install YearPicker plugin.

1. first of all install jQuery and Moment.js libraries into your HTML document

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Moment Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

2. next, include YearPicker‘s CSS and JavaScript files

<!-- Year Picker CSS -->
<link rel="stylesheet" href="css/yearpicker.css" />

<!-- Year Picker Js -->
<script src="js/yearpicker.js"></script>

3. create HTML input field with `yearpicker` class

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

3. initialize YearPicker plugin with selector pointed to given class name

$(document).ready(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',

      // 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>`
    });
});

YearPicker plugin, after initialization will handle focus event on selected input field and present popup with year list.

4. Conclusion

In this article, we presented a jQuery plugin YearPicker used to select the year in popup attached to the specified input field. The plugin is fully customizable with CSS styles and comes with several options. You can provide the starting and ending year, an initial year or auto-hiding after selection.