JQuery UI datepicker strange problem (happens in Firefox)

问题

I use the following function to disable days from 2011-02-13 to 2011-02-18 in the date picker calendar:

function no_disabled_days(date){
               dateStr1 = '2011-02-13';                   
               dateStr2= '2011-02-18';

               disabled_start_day = new Date(dateStr1);
               disabled_end_day = new Date(dateStr2);

               if(date >= disabled_start_day && date <= disabled_end_day){
                   return [false];
               }


             return [true];

  }

$("#reserve_date").datepicker({
            beforeShowDay: no_disabled_Days
});

For example, if dateStr1='2011-02-13', dateStr2='2011-02-18', the days from 2011-02-13 to 2011-02-18 are disabled.

Since I use

if(date >= disabled_start_day && date <= disabled_end_day) (Notice the '=' sign)

so, '2011-02-13' and '2011-02-18' are disabled.

Things are working fine in Chrome browswer, however, when I test in Firefox, the exact disable_start_date is not disabled, that's '2011-02-13' is not disabled, other days are working properly. Why?

Why the disabled start date (2011-02-13) is not in disable status in firefox?

回答1:

You're running into a timezone issue. When you create your date object, your local timezone is affecting the time component of the Date objects, which, in turn, affects the comparison. The solution is to explicitly set the time when you create the Date objects.

Additionally, the way you are using variables in your function is creating extra global variables. You should use the var keyword to make them local to the function.

Here's the corrected code:

function no_disabled_days(date){
    var dateStr1 = '2011-02-13T00:00:00';                   
 var dateStr2= '2011-02-19T00:00:00';

 var disabled_start_day = new Date(dateStr1);
 var disabled_end_day = new Date(dateStr2);

  if(date >= disabled_start_day
     && date <= disabled_end_day){
    return [false];
  }
  return [true];
}

$("#reserve_date").datepicker({
  beforeShowDay: no_disabled_days
});

And a working example (tested in Firefox and Chrome):

http://jsfiddle.net/ChrisMH/5jX6B/1/

来源：https://stackoverflow.com/questions/4991824/jquery-ui-datepicker-strange-problem-happens-in-firefox

标签

jquery

jquery-ui

jquery-ui-datepicker