Display only years in JQuery UI Calendar

Question

how can i show or display only years in JQuery UI Calendar? I need to do a dropdown list with years without taking care the month, just years.

Thanks in advance

Solution 1

    $( "#datepicker" ).datepicker({
        changeMonth: false,
        changeYear: true
    });

http://jqueryui.com/demos/datepicker/#dropdown-month-year

Alternatively, if you just want a list of years, you can generate it without jQueryUI:

var i,yr,now = new Date();
for (i=0; i<10; i++) {
    yr = now.getFullYear()+i; // or whatever
    $('#select-year').append($('<option/>').val(yr).text(yr));
};

Solution 2

If you want a jquery UI datepicker which shows only the year, try this:

stepMonths: 12,
monthNames: ["","","","","","","","","","","",""]

Result: no month name is shown.

I also used this to hide the calendar-part of the datepicker:

<style>.ui-datepicker-calendar { display: none; } </style>

Solution 3

var i,yr,now = new Date();

for (i=0; i<10; i++) {

    yr = now.getFullYear()+i; // or whatever
    $('#select-year').append($('<option/>').val(yr).text(yr));

};

This function works very well but it has some error

1. It display year 3 times.
2. When we select second time the data display with previous selected data.

Comments

[Blazemonger]

Well, of course it does -- it's a monthly calendar, you need some indication of what month you're on. Are you expecting a calendar for all twelve months? or just a dropdown of years? You need to explain yourself better.

[Leandro Bardelli]

I think your first approuch was better than this answer. As i said, i need a dropdown list with years, i mean, just a dropdown of years :)