jQuery datepicker restrict months

Question

Sorry folks, don't seem to find this in the manual, but I guess it must be there. I need to restrict the months shown on a UI datepicker to only May, June, July, August, September and October. I see lots of minDate and maxDate but they seem to set date ranges for minDate todate maxDate +3M etc. suggestions please.

Maybe this related post helps: http://stackoverflow.com/questions/2208480/jquery-date-picker-to-show-month-year-only — AquilaRapax, May 30 '12 at 07:11

Jason Kulatunga · Accepted Answer · 2012-05-30T07:52:17.820

2

OnChangeMonthYear is the event you want to attach to. You'll probably want to check if the month is out of your allowable month range, then reset the date to the first of the next allowable month in the next year.

$('.selector').datepicker({
    onChangeMonthYear: function(year, month, inst) {
    //0 based index on the months, from what I remember.
        if(month<4){
            year = year-1;
             $( this ).datepicker( "setDate" , new Date(year, 9, 1) )
             $( this ).datepicker("refresh");
        }

        if(month>9){
            year = year+1;
             $( this ).datepicker( "setDate" , new Date(year, 4, 1) )
             $( this ).datepicker("refresh");
        }

    }
});

edited May 30 '12 at 07:52

answered May 30 '12 at 07:25

Jason Kulatunga

5,814
1
26
50

Jason, not guite still have to click for the "non" months which don't show so you go October, click click click etc till the counter reaches 5 for May – Watkin Parrot May 30 '12 at 07:30
Hmm, you may have to call the refresh function as well. let me take a look. – Jason Kulatunga May 30 '12 at 07:33
Jason Gotit! - rather than use inst.datepicker change to jQuery(this).datepicker(blah blah) – Watkin Parrot May 30 '12 at 07:53
Jason - do you want to edit your answer for others? or shall I – Watkin Parrot May 30 '12 at 07:53
@Ghokun If the user is manually entering the date, you are probably going to have to do some jquery validation on the text field. Or possibly attach to the close event on the datepicker and reset the date if it is outside of your range. – Jason Kulatunga May 30 '12 at 08:05

Ghokun · Answer 2 · 2012-05-30T07:20:32.577

0

var currentYear = (new Date).getFullYear();

$( ".selector" ).datepicker(
  { minDate: new Date(currentYear, month, day, hours, minutes, seconds, milliseconds), 
    maxDate: new Date(currentYear, month, day, hours, minutes, seconds, milliseconds) });

This should do it, not sure if it works. But gives the idea

edited May 30 '12 at 07:20

answered May 30 '12 at 07:15

Ghokun

3,345
3
26
30

Ghokun - nearly but I don't want to set the year i.e. May in any year not just May in the set year – Watkin Parrot May 30 '12 at 07:18
Ghokun VERY VERY near but how do I them move to May next year when I reach October this year? – Watkin Parrot May 30 '12 at 07:25
I guess Jason just posted what I was about to post. – Ghokun May 30 '12 at 07:28

jQuery datepicker restrict months

2 Answers2

Linked