CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
John Magnolia
John Magnolia

Reputation: 16793

jQuery datepicker show next month if near the end of current month

If the current date is near the end of the month, how can I set the calendar to auto show the next month?

To solve the issue of the calendar ever defaulting to this.

enter image description here

At the moment I have:

$(predecessor+"input.datePicker").datepicker({
    minDate: 0,
    changeMonth: true,
    dateFormat: "dd/mm/yy",
    firstDay: 1,
    hideIfNoPrevNext: true,
    showAnim: 'slideDown',
    showOn: "both",  
    showOtherMonths: true,
    showStatus: true,
    maxDate: '-1d'
});

Upvotes: 2

Views: 14307

Answers (2)

jd_7
jd_7

Reputation: 1862

Use beforeShow Event to set the attribute numberOfMonths

$('#calendar').datepicker({
    //minDate: 0,
    changeMonth: true,
    dateFormat: "dd/mm/yy",
    firstDay: 1,
    hideIfNoPrevNext: true,
    showAnim: 'slideDown',
    showOn: "both",  
    showOtherMonths: true,
    showStatus: true,
    //maxDate: '-1d'
    beforeShow: function(text, inst){        
        var next_day = new Date(
            inst.selectedYear,
            inst.selectedMonth,
            inst.selectedDay
        );        
        next_day.setDate(next_day.getDate()+1);
        console.log(inst.selectedMonth);
        console.log(next_day.getMonth());
        if(inst.selectedMonth != next_day.getMonth())
            return {numberOfMonths: 2};
        else
            return {numberOfMonths: 1};
    }
}).datepicker("setDate", "+0d" );​

Demo : http://jsfiddle.net/Z44PQ/1/, select 30 Nov and open again.

Upvotes: 3

Crob
Crob

Reputation: 15175

Datepicker has a defaultDate option that specifies which day starts out highlighted.

So, if you come up with your logic to determine when it needs to start on the next month, it should be pretty simple. 

var defaultDate = new Date();
if(advanceMonth){
  defaultDate = new Date(defaultDate.getYear(), defaultDate.getMonth() + 1, 1, 0, 0,0)
}

$(predecessor+"input.datePicker").datepicker({
  defaultDate: defaultDate
});

Upvotes: 1

Related Questions