Creating A Dynamic YearPicker Plugin Using JQuery And HTML

We have seen many year pickers that allow you to select years from the drop down; I have seen a requirement of selecting years from the year picker just as we select date from the datepickers. Now I am going to create a dynamic year picker plugin used to select the year using jquery and html. As we have faced the issue in jquery-ui datepicker plugin we can only create the datepicker and month picker with some modification in the datepicker properties.

This year picker plugin is simple and easy to use in any project. It’s a validated plugin.

You can either enter the value in the textboxs or can use the arrows [ > / < ] to enter the year value or simply click on the textbox or image of the year.

You just need to copy and paste the code as given below,

Steps to use this Year picker.

Step 1

Download both files and place them in the same folder and use them in your project.

Step 2

For using at your local system without the internet please download the year icon from the given source in image tag.

YearPicker.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling links</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
hr{
margin: 2px 0 0 0;
}
a{
cursor:pointer;
}
#yearBetween{
margin-left: 67px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="YearPicker.js"></script>
</head>
<body>
<div class="form-group col-sm-8" style="display:inline-flex;">
<div style="display:inline-flex;">
<label class="col-sm-4">Select Year</label>
<input type="text" id="txtYear1" class="form-control cols-sm-2"/>
<img id="yearImage" src="https://cdn4.iconfinder.com/data/icons/VISTA/accounting/png/400/calendar_year.png" style="cursor: pointer;width:50px; height:35px;"></img>
</div>
<div id="divYear1" style="display:none;border: 0.5px solid lightgrey; height:auto;">
<div style="background:lightgrey;height: 12%;">
<a id="btnPrev1" class="btnPrev glyphicon glyphicon glyphicon-menu-left" style="float:left;margin: 4px;"></a>
<input style="text-align: center; width: 43%; border: none; margin-left: 20%;" type="text" id="yearBetween" class="btn-default"/>
<a id="btnNext1" class="btnNext glyphicon glyphicon glyphicon-menu-right" style="float:right;margin: 4px;"></a>
</div>
<hr/>
<div id="yearContainer" style="width:260px; height:auto;">
</div>
</div>
</div>
</body>
</html>

YearPicker.js

$(document).ready(function(){
var startRange = 2000;
$(".btnPrev").click(function(){
endRange = startRange;
startRange = startRange - 16;
$("#yearBetween").text('');
var container = event.currentTarget.nextElementSibling.parentElement.nextElementSibling.nextElementSibling;
createButtons(container);
bindButtons();
var rangeValues = startRange+ " - "+(endRange-1) ;
$("#yearBetween").val(rangeValues);
});
$(".btnNext").click(function(){
startRange = endRange;
endRange = endRange + 16;
$("#yearBetween").text('');
var container = event.currentTarget.parentElement.nextElementSibling.nextElementSibling;
createButtons(container);
bindButtons();
var rangeValues = startRange+ " - "+(endRange-1) ;
$("#yearBetween").val(rangeValues);
});
$("#txtYear1,#yearImage").click(function(){
debugger;
$("#divYear1").toggle();
endRange = startRange + 16;
$("#yearBetween").text('');
var container = "#yearContainer";
//var val = $('input[type="button"][value="My task"]')
var val = $("#txtYear1").val();
if(val!=""){
var selector = "input[value='" + val + "']";
$(selector).css("background","#ccc");
}
createButtons(container);
bindButtons();
//startRange = parseInt(val)-5;
var rangeValues = startRange+ " - "+(endRange-1) ;
$("#yearBetween").val(rangeValues);
});
function bindButtons(){
$(".button").bind('click', function(evt)
{
$("#txtYear1").val($(this).val());
$('#divYear1').hide();
});
}
function createButtons(container){
var count=0;
$(container).empty();
for(var i= startRange; i< endRange; i++)
{
var btn = "<input type='button' style='margin:3px;' class='button btn btn-default' value=" + i + "></input>";
count = count + 1;
$(container).append(btn);
if(count==4)
{
$(container).append("<br/>");
count = 0;
}
}
}
$("#yearBetween").focusout(function(){
var yearValue = $("#yearBetween").val().split("-");
startRange = parseInt(yearValue[0].trim());
if(startRange>999 && startRange < 9985){
endRange = startRange + 16;
$("#yearBetween").text('');
var container = "#yearContainer";
createButtons(container);
bindButtons();
var rangeValues = startRange+ " - "+(endRange-1) ;
$("#yearBetween").val(rangeValues);
}
else
{
$("#yearBetween").focus();
}
});
});