JQuery

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

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Styling links</title>  
  6.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  
  7.     <style type="text/css">  
  8.     hr{   
  9.         margin: 2px 0 0 0;  
  10.     }  
  11.     a{  
  12.         cursor:pointer;  
  13.     }  
  14.     #yearBetween{  
  15.         margin-left: 67px;  
  16.     }  
  17.     </style>  
  18.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  19.     <script type="text/javascript" src="YearPicker.js"></script>  
  20.   </head>  
  21.   <body>  
  22.     <div class="form-group col-sm-8" style="display:inline-flex;">  
  23.         <div style="display:inline-flex;">  
  24.             <label class="col-sm-4">Select Year</label>  
  25.             <input type="text" id="txtYear1" class="form-control cols-sm-2"/>  
  26.             <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>  
  27.         </div>  
  28.         <div id="divYear1" style="display:none;border: 0.5px solid lightgrey; height:auto;">  
  29.         <div style="background:lightgrey;height: 12%;">  
  30.             <a id="btnPrev1" class="btnPrev glyphicon glyphicon glyphicon-menu-left" style="float:left;margin: 4px;"></a>  
  31.             <input style="text-align: center; width: 43%; border: none; margin-left: 20%;" type="text" id="yearBetween" class="btn-default"/>  
  32.             <a id="btnNext1" class="btnNext glyphicon glyphicon glyphicon-menu-right" style="float:right;margin: 4px;"></a>  
  33.         </div>  
  34.         <hr/>  
  35.         <div id="yearContainer" style="width:260px; height:auto;">  
  36.         </div>  
  37.     </div>  
  38.     </div>  
  39.   </body>  
  40. </html> 

YearPicker.js

  1. $(document).ready(function(){  
  2.         var startRange = 2000;  
  3.           
  4.         $(".btnPrev").click(function(){  
  5.             endRange = startRange;  
  6.             startRange = startRange - 16;  
  7.             $("#yearBetween").text('');  
  8.             var container = event.currentTarget.nextElementSibling.parentElement.nextElementSibling.nextElementSibling;  
  9.             createButtons(container);  
  10.             bindButtons();  
  11.             var rangeValues = startRange+ " - "+(endRange-1) ;  
  12.             $("#yearBetween").val(rangeValues);  
  13.         });  
  14.           
  15.         $(".btnNext").click(function(){  
  16.             startRange = endRange;  
  17.             endRange = endRange + 16;  
  18.             $("#yearBetween").text('');  
  19.             var container = event.currentTarget.parentElement.nextElementSibling.nextElementSibling;  
  20.             createButtons(container);  
  21.             bindButtons();  
  22.             var rangeValues = startRange+ " - "+(endRange-1) ;  
  23.             $("#yearBetween").val(rangeValues);  
  24.         });  
  25.           
  26.         $("#txtYear1,#yearImage").click(function(){  
  27.             debugger;  
  28.             $("#divYear1").toggle();  
  29.             endRange = startRange + 16;  
  30.             $("#yearBetween").text('');  
  31.             var container = "#yearContainer";  
  32.   
  33.               
  34.             //var val = $('input[type="button"][value="My task"]')  
  35.               
  36.             var val = $("#txtYear1").val();  
  37.             if(val!=""){  
  38.             var selector = "input[value='" + val + "']";  
  39.             $(selector).css("background","#ccc");  
  40.             }  
  41.             createButtons(container);  
  42.             bindButtons();  
  43.             //startRange = parseInt(val)-5;  
  44.             var rangeValues = startRange+ " - "+(endRange-1) ;  
  45.             $("#yearBetween").val(rangeValues);  
  46.         });  
  47.           
  48.         function bindButtons(){  
  49.             $(".button").bind('click', function(evt)  
  50.             {  
  51.                 $("#txtYear1").val($(this).val());  
  52.                 $('#divYear1').hide();  
  53.             });  
  54.         }  
  55.           
  56.         function createButtons(container){  
  57.             var count=0;  
  58.             $(container).empty();  
  59.             for(var i= startRange; i< endRange; i++)  
  60.             {  
  61.                 var btn = "<input type='button' style='margin:3px;' class='button btn btn-default' value=" + i + "></input>";  
  62.                 count = count + 1;  
  63.                 $(container).append(btn);  
  64.                 if(count==4)  
  65.                 {  
  66.                     $(container).append("<br/>");  
  67.                     count = 0;  
  68.                 }  
  69.             }  
  70.         }  
  71.           
  72.         $("#yearBetween").focusout(function(){    
  73.             var yearValue = $("#yearBetween").val().split("-");  
  74.             startRange = parseInt(yearValue[0].trim());  
  75.             if(startRange>999 && startRange < 9985){  
  76.                 endRange = startRange + 16;  
  77.                 $("#yearBetween").text('');  
  78.                 var container = "#yearContainer";  
  79.                 createButtons(container);  
  80.                 bindButtons();  
  81.                 var rangeValues = startRange+ " - "+(endRange-1) ;  
  82.                 $("#yearBetween").val(rangeValues);  
  83.             }  
  84.             else  
  85.             {  
  86.                 $("#yearBetween").focus();  
  87.             }  
  88.         });  
  89.     });  

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs