CODEWITHSUNDEEP
javascriptjqueryhtml
n.ssendawula
n.ssendawula

Reputation: 33

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

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

});

Upvotes: 2

Views: 8432

Answers (3)

Phani Kumar M
Phani Kumar M

Reputation: 4590

 $('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)

Upvotes: 2

hallleron
hallleron

Reputation: 1992

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"/>

Upvotes: 0

jek
jek

Reputation: 148

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

Upvotes: 2

Related Questions