How can I change my date picker into a year only picker?

Question

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();
    }

});

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, Aug 29 '17 at 06:42
https://stackoverflow.com/questions/13528623/jquery-ui-datepicker-to-show-year-only — Incredible, Aug 29 '17 at 06: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, Aug 29 '17 at 06:47
Possible duplicate of [jQuery UI DatePicker to show year only](https://stackoverflow.com/questions/13528623/jquery-ui-datepicker-to-show-year-only) — julianstark999, Aug 29 '17 at 06:47

score 2 · Answer 1 · answered Aug 29 '17 at 06:45

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

Phani Kumar M · Answer 2 · 2017-08-29T07:15:48.287

2

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

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

I assume it is bootstrap datepicker (Link)

edited Aug 29 '17 at 07:15

answered Aug 29 '17 at 06:47

Phani Kumar M

4,564
1
14
26

It has failed to work.when i comment out the date format,then it brings calender including months,dates and year.when i live the year format,it doesn't work.please help me – n.ssendawula Aug 29 '17 at 07:11
@n.ssendawula you can find the running example above in my post. – Phani Kumar M Aug 29 '17 at 07:16
your code is run very well in a separate file but when i paste it in my script,it doesn't. how can i make it work?what may be the cause of such a failure.i need some help – n.ssendawula Aug 29 '17 at 08:14
Thanks a lot. now it works fine.i have solved the problem.have a nice day – n.ssendawula Aug 29 '17 at 09:26
I want to help me with something,how can i set the maximum year to the current year.thanks – n.ssendawula Aug 29 '17 at 09:30
Accept the answer if it helped you, and post new question for this new doubt, along with what you have done till now to achieve the same. – Incredible Aug 29 '17 at 10:28

score 0 · Answer 3 · answered Aug 29 '17 at 06:45

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

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

How can I change my date picker into a year only picker?

3 Answers3