I want to change to year picker calendar only in a dynamic input fields.The calender should show only year values Can any one help me please.

Here is the javascript code.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

I want to change to year picker calendar only in a dynamic input fields.The calender should show only year values Can any one help me please.

Here is the javascript code.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

• javascript
• jquery
• html

• 1 which datepicker library are you using ? – shyammakwana.me Commented Aug 29, 2017 at 6:42
• 2 The date picker would be a massive overhead for this task. Simply make a drop down with a list of numbers from year 19xx to 20xx – Herr Derb Commented Aug 29, 2017 at 6:42
• stackoverflow./questions/13528623/… – Iti Tyagi Commented Aug 29, 2017 at 6:45
• its like,it works very well but it displays dates, month, and year calendar.but for me i wanted to display years only.i will be so glad when you help me on that please. – n.ssendawula Commented Aug 29, 2017 at 6:47
• Possible duplicate of jQuery UI DatePicker to show year only – julianstark999 Commented Aug 29, 2017 at 6:47

3 Answers 3

You can try this one. And see if it will help your problem.

HTML:

<select name="yearpicker" id="yearpicker"></select>

JS:

var startYear = 1800;
for (i = new Date().getFullYear(); i > startYear; i--)
{
  $('#yearpicker').append($('<option />').val(i).html(i));
}

Here is a jsfiddle link

 $('body').on('focus',".datepicker", function(){
    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker({
            minViewMode: 2,
            format: 'yyyy'
        });
    }
});

<script src="https://code.jquery./jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" />

I assume it is bootstrap datepicker (Link)

I would not use a datepicker if you want to select a year only. Use a select for that. However, you can modifiy the datepicker (since you didn't mention which one you are using I assume jQuery UI) to only return the year.

Have a look at this fiddle:

$(function() { 
    $(".datepicker").datepicker({ dateFormat: 'yy' });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery./ui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery./ui/1.9.1/jquery-ui.js"></script>

<input type="text" class="datepicker"/>