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.

score 19 · Answer 1 · answered Jan 12 '12 at 15:09

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.

Excellent. Exactly what I was after. – dreza May 01 '13 at 23:09 — dreza, May 01 '13 at 23:09
Thanks Patricia! Just what I needed! – Ben Sinclair Jan 28 '14 at 01:59 — Ben Sinclair, Jan 28 '14 at 01:59

score 7 · Accepted Answer · edited Dec 27 '19 at 03:46

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

What if I want some date pickers to have the year and others to not have the year? — David, Apr 23 '10 at 12:53
In that case I would try to extend the plugin, proview an option you can set and then use that option somewhere around this line if (secondary || !changeYear). An alternative would be to use both the existing datepicker and your own version with the code for the year removed, in this case you would need to rename your hacked widget to have a different name, i havent tried that but its probably this property: var PROP_NAME = 'datepicker'; — DannyLane, Apr 23 '10 at 13:51

score 6 · Answer 3 · answered Oct 05 '11 at 14:12

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 }

score 2 · Answer 4 · answered Jan 04 '14 at 10:14

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

score 0 · Answer 5 · answered Oct 30 '12 at 10:33

0

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 }

answered Oct 30 '12 at 10:33

Vaishu

2,333
3
23
25

jQuery UI - Datepicker - Hide year

5 Answers5

Linked