jQuery UI - Datepicker - Hide year

Question

I\'m using jQuery UI 1.8 and I would like to hide the year from the user in both the popup and the textbox. Essentially instead of picking the day, month and year I want the

Answer 1

I came across this thread in my search for a good way to do this, and here's what i came up with.

in my css i have a

.BirthdayDatePicker .ui-datepicker-year
{
 display:none;   
}

and this is how i set up my datepickers that i don't want to show the year on:

$('.DateTextBox.NoYear').datepicker({
            beforeShow: function (input, inst) {

                inst.dpDiv.addClass('BirthdayDatePicker');
            },
            onClose: function(dateText, inst){
                inst.dpDiv.removeClass('BirthdayDatePicker');
            }
        });

basically i add the class just before it shows, and take it off when it hides it, so that other date pickers on the page arn't affected by it.

just incase anyone ever needs to hide the year only on specific pickers on a page and doesn't want to mess with the internals of jQuery.

Answer 2

The attribute

changeYear:false;

select.ui-datepicker-year { display:none }

sometimes change dropdown to span.<span></span> So add this css code.

span.ui-datepicker-year { display:none }

Answer 3

Very old question, but I just needed to do this myself and here's an alternate method that might be useful to somebody; a quick and dirty fix that will enable your other datepickers to continue working, provided you do NOT need the changeYear functionality is to set changeYear to true on the datepickers you DON'T want a year showing up, then add the CSS:

select.ui-datepicker-year { display:none }

Answer 4

VIKSME Hide year http://jsfiddle.net/tocv/e5cvA/

CSS

.ui-datepicker-year
{
 display:none;   
}

HTML

    <div id="datepicker"></div>

</div>

JavaScript

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

Answer 5

I dont think this option is exposed va the api. I belive that the easiest way is to change the stylesheet. Change the ui-datepicker-year class to display: none Another option would be to edit the source so it isnt rendered at all, to do that you can remove this part of the code:

// year selection
if (secondary || !changeYear)
    html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
else {
    // determine range of years to display
    var years = this._get(inst, 'yearRange').split(':');
    var thisYear = new Date().getFullYear();
    var determineYear = function(value) {
        var year = (value.match(/c[+-].*/) ? drawYear + parseInt(value.substring(1), 10) :
    (value.match(/[+-].*/) ? thisYear + parseInt(value, 10) :
    parseInt(value, 10)));
    return (isNaN(year) ? thisYear : year);
    };
    var year = determineYear(years[0]);
    var endYear = Math.max(year, determineYear(years[1] || ''));
    year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
    endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
    html += '<select class="ui-datepicker-year" ' +
        'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
        'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
        '>';
    for (; year <= endYear; year++) {
        html += '<option value="' + year + '"' +
            (year == drawYear ? ' selected="selected"' : '') +
            '>' + year + '</option>';
    }
    html += '</select>';
}

I haven't tried removing the code but it should work. I did try hiding it using css and that does work (in firefox anyway :) )

HTH