CODEWITHSUNDEEP
jqueryjquery-uidatepickerjquery-ui-datepicker
sathish
sathish

Reputation: 800

show other months in jquery ui datepicker

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,

enter image description here

Kindly Anyone help..

Upvotes: 2

Views: 6741

Answers (2)

Guganeshan.T
Guganeshan.T

Reputation: 583

I checked the CSS used in the jQuery UI's DatePicker control. They use the class ui-priority-secondary for dates in other months.

So what you can do is, use jQuery to locate elements that use that particular class and replace the HTML to - and center it.

I tried the following and it worked.

$('.ui-datepicker-calendar .ui-priority-secondary').html('-').css('text-align', 'center')

Hope that helps

UPDATE:

Since I checked it only with the Firebug console, didn't see the scenario where it won't be applied at the right time. @mu is too short has pointed that out and has a working solution.

Upvotes: 2

mu is too short
mu is too short

Reputation: 434615

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.

Upvotes: 3

Related Questions