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 user to just pick the day and month.

Hiding the year in the textbox is easy enough, the code shown below will do that. I'm stumped on how to hide the year from the popup - so it would say "April" instead of "April 2010".

$(function() {
        $("#beginDateRange").datepicker({ dateFormat: 'mm/dd' });
});

<input type="text" name="beginDateRange" id="beginDateRange" />

Any help would be greatly appreciated.

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

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