jquery ui datepicker day/month only, not year selection

Question

I've searched here in SO and all around but no properly solutions founded for this issue. With jQueryUI DatePicker I need to select a recursive date for all years, so I don't wanna show year selection, 'cause it doesn't make sense.

How can I obtain this inside the call like the following?

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

Note: I can't use css solution as suggested here .ui-datepicker-year{ display:none; } because there are other datepickers in the same page.

Any help will be appreciated.

Thanks in advance.

Answer 1

Try this demo: http://jsfiddle.net/rAdV6/20/
Also see both screenshots below.

To elaborate further, this fix will allow to have multiple date pickers with or without year on top appear on the top of the calendar.

jQuery code:

$('.DateTextBox.NoYear').datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.addClass('NoYearDatePicker');
    },
    onClose: function(dateText, inst){
        inst.dpDiv.removeClass('NoYearDatePicker');
    }
});

$('#datepicker').datepicker( { changeYear: false, dateFormat: 'dd/mm',});
$('#datepicker1').datepicker( { changeYear: true, dateFormat: 'dd/mm', });
$('#datepicker2').datepicker( { changeYear: false, dateFormat: 'dd/mm', });

CSS:

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

HTML:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

date (without year) <input type="text" id="datepicker" class="DateTextBox NoYear">

<br />
date 1: (With year) <input type="text" id="datepicker1" >
<br />
date 2: (Without year) <input type="text" id="datepicker2" class="DateTextBox NoYear">
?

How it appears in my lappy OSX: