Question

I need to show other months as ‘-‘ in my jquery ui datepicker.

$( "#datepicker" ).datepicker({
    showOtherMonths: true
});

The above code shows the other month dates. But, I need to show other months date as ‘-‘.

For Ex,

Kindly Anyone help..

Answer 1

I can’t find anything that allows you to control the text that is displayed in the “other month” cells but you can kludge your way around it.

Guganeshan.T is on the right track. But the tricky part is applying the change at the right time. The beforeShow and onChangeMonthYear events are fired before the new month is displayed and there are after versions of those events. My usual trick for situations like this is to use setTimeout with a timeout of zero, that effectively lets you queue up a function to be called once the browser gets control again and that’s after the current chunk of JavaScript has finished running. So something like this should do the trick:

function ickyHyphenKludge(inst) {
    setTimeout(function() {
        inst.dpDiv.find('.ui-datepicker-other-month span.ui-state-default').html('-');
    }, 0);
}

$("#datepicker").datepicker({
    showOtherMonths: true,
    selectOtherMonths: false,
    beforeShow: function(input, inst) {
        ickyHyphenKludge(inst);
    },
    onChangeMonthYear: function(year, month, inst) {
        ickyHyphenKludge(inst);
    }
});

Demo: http://jsfiddle.net/ambiguous/YKNmV/1/

That’s pretty kludgey and smelly but it works, it should be pretty solid, and I can’t think of any other way.