Question

Hey Guys,

i have a big problem with my jQuery Datepicker Script.
I use jQuery 1.4.2 and jQuery Ui 1.8.

Background:
I have a reservation calendar with a fromDate and toDate and all Dates which are already reserved are disabled. The Dates come from Database by AJAX Call.

Problem:
Everything works fine in Firefox – but IE 7/8 does not disable Dates execept for the actual month. I do not get any Error Message in IE 7/8!

Here’s my code:

First the AJAX Call to get the Dates:

    var navDays = (function () {
        var val = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': WEG_URL+'rsv_avdates.php',
            'success': function (data) {
                val = data;                    
            }
        });
        return val;
    })();

    var disDays = navDays.split('|');  

In disDays i have now Dates like ‘2010-01-01′,’2010-01-02’,…..

Here’s my disableDates function:

    function disabledDays(date) {
        var m = date.getMonth();
        var d = date.getDate();
        var y = date.getFullYear();

        for (var i = 0; i <= disDays.length-1; i++) {
          var myDate = new Date(disDays[i]);              
          if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
          {
            return [false];
          }
        }
        return [true];
    }   

and finally my datepicker call:

    $('#fromdate, #todate').datepicker(
    {
        showOn: "both",
        buttonImage: 'images/calender.gif',
        buttonImageOnly: true,
        beforeShowDay: disabledDays,
        dateFormat: "dd.mm.y",
        firstDay: 1, 
        changeFirstDay: false
    }); 

Do you have any idea why all works fine in Firefox, Safari, Chrome, … but NOT in IE 7/8 ???

Thanks for all.

Sascha

Answer 1

The problem is that those date strings are not really right for just instantiating a date object. Here’s how you could make “disDays” be an array of dates, which would let you just use those directly in the callback function without having to construct new Date instances all the time:

  var disDays = $.map(navDays.split('|'), function(d) {
    var dd = d.split('-');
    return new Date(parseInt(dd[0], 10), parseInt(dd[1], 10) - 1, parseInt(dd[2], 10));
  });

Now the callback code can just do this:

     function disabledDays(date) {
      var m = date.getMonth();
      var d = date.getDate();
      var y = date.getFullYear();

      for (var i = 0; i <= disDays.length-1; i++) {
        var myDate = disDays[i];             
        if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
        {
          return [false];
        }
      }
      return [true];
    }