Plugin Preview

Share this: 

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Year Picker
Author:	Saravanan
Licence:	MIT Licence
Published:	June 13, 2019
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version and Moment.js 2.24.0
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	7.65 KB

 Demo Download

How to Use jQuery Year only Datepicker

1. To getting started with YearPicker, first of all load jQuery JavaScript library and Moment.js 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. After that, also 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 input element in HTML with type="text" and add class name "yearpicker form-control" in which selected year will be inserted.

<input type="text" class="yearpicker form-control" value="" />

4. Finally, initialize the plugin in jQuery document ready function. Define selected year, start and end year in plugin’s configuration options.

$(document).ready(function() {
   $(".yearpicker").yearpicker({
      year: 2021,
      startYear: 2019,
      endYear: 2050,
   });
});

Advance Configuration Options for jQuery Year Picker

The following are some advance configuration options to create / customize “Year Picker Calendar”.

$('.yearpicker').yearpicker({
   year: 2019,
});

$('.yearpicker').yearpicker({
   startYear: 2018,
});

$('.yearpicker').yearpicker({
   endYear: 2050,
});

$('.yearpicker').yearpicker({
    itemTag: 'li',
});

$('.yearpicker').yearpicker({
  selectedClass: 'selected',
  disabledClass: 'disabled',
  hideClass: 'hide',
  highlightedClass: 'highlighted',
});