Minimal Dropdown Year Selector With jQuery - year-select

File Size: 7.83 KB
Views Total: 29328
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Dropdown Year Selector With jQuery - year-select

A simple, small yet customizable jQuery year selector plugin which allows the user to quickly pick a year from a dropdown list.

How to use it:

1. Create a select or input element for the year selector.

<select class="yearselect"></select>
<input class="yearselect" value="2016">

2. Include jQuery library and the jQuery year selector plugin at the bottom of the html page.

<script src="//"></script>
<script src="lib/year-select.js"></script>

3. Call the function to initialize the year selector.


4. Set the start/end years.

  start: 2000,
  end: 2016

5. Define the number of interval between years.


6. Define the order of years rendered.

  order: 'asc' // or desc

7. Set the selected year.

  selected: 2016

8. Format the display of the year.

  formatDisplay: function(yr) { return yr }

9. If you used formatDisplay callback, you can make the formatted string as value.

  displayAsValue: true

10. The plugin also can be chained with other plugins like jQuery select2 plugin.


Change log:


  • Add formatting display ability

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