jQuery UI Datepicker minDate changes adjust the calendar; how can I freeze it?

Question

I have a five-month Datepicker inline calendar. startDate is a variable I wrote which is set by a user click event. I am adjusting the minDate and maxDate options after init by doing this:

$('#datepicker').datepicker("option",{"minDate":startDate,"maxDate":endDate}).datepicker("refresh");

However, when the calendar is refreshed, it displays the first month according to the startDate variable, which is disorienting. For example, I have the calendar init in January and it shows through May. When startDate happens to be in a later month, say February, then when I refresh the calendar, it displays starting from that month (February) and disables all dates up to the one selected. I'd like to freeze the calendar so that it always shows January through May, yet blacks out all the dates up to minDate.

Is there an easy way to freeze the calendar so that it displays a specific 5-month range regardless of the minDate and maxDate settings?

Thanks in advance.

Answer 1

Can you try putting the refresh before the options?

Answer 2

$("#datepicker").datepicker({ showCurrentAtPos: new Date().getMonth(), numberOfMonths: 12, minDate: startDate, maxDate: endDate});

Answer 3

I was trying to hack the minDate and maxDate feature in order to black out dates prior to a chosen date. Instead of doing this, I built an array of date objects which I feed to beforeShowDay like so:

   $('#datepicker').datepicker({
            ...
            beforeShowDay: setRestrictedDates,
            ...
   })
 function setRestrictedDates(date) {
  var arrLen = jsForbiddenDatesArray.length;
  for (var x=0; x<arrLen; x++) {
   var arraydate = jsForbiddenDatesArray[x];
   var arraytime = Math.round( new Date(arraydate).getTime() / 86400000 );
   var dtime = Math.round( date.getTime() / 86400000 );
   if ( dtime == arraytime || date.getDay() == 5) {
    return [false, ''];
    break;
   }
  }
  return $.datepicker.noWeekends(date);
 }

Note that setting dtime by dividing by 86400000 just converts the dates to days so that I can compare to make sure that two days are the same (dtime == arraytime). Also, the OR statement "date.getDay() == 5" selects all Fridays. That, combined with datepicker.noWeekends(date), means that I have weekends and Fridays blacked out, along with whatever dates are in my forbidden dates array.

I hope this helps someone. Setting blackout dates for datepicker is very handy but I found the documentation for doing so to be obscure to non-existent.

Thanks everyone here and in jQuery forums who helped me figure this out.

Answer 4

John--

I was faced with this same problem, and found a pretty cool solution online. It makes visualization of a date range really easy, and for my app the preset date range choices are very cool.

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

The "range" feature is detailed down near the bottom. If you test this out, make sure not to forget linking the assoicated CSS file, as it will make or break the script.

Good luck.