3

I use jQuery datepicker for showing users available days and wants to disable and mark red busy days. I use for this beforeShowDay datepicker option:

beforeShowDay: function(date) {
            var cssClass = '';

            for (var i=0; i < busyStarts.length; i++) {
                var busyStart = new Date(busyStarts[i]);
                var busyEnd = new Date(busyEnds[i]);
                if (date >= busyStart && date <= busyEnd) {
                    cssClass = 'ui-state-disabled busy_date';
                }
            }

            return [true, cssClass];
        }

busyStarts and busyEnds variables are:

enter image description here

But I see this result:

enter image description here

the first days of intervals are not selected. Why? I have condition date >= busyStart

When I looked into debugger: enter image description here

That's why equal (=) condition didn't work. Start and End dates with time 03:00:00 but date with 00:00:00 and when dates the same date <= at the same day because 00:00:00 < 03:00:00.

Now I ask, WHY? And how to resolve this correct?

Dmytro Zarezenko
  • 10,526
  • 11
  • 62
  • 104
  • If you use a debugger and break on that expression, does your CSS string get a value for 9-24 -> 9-30? – Jaime Torres Aug 14 '12 at 11:22
  • Interesting situation when I look in the debugger: busyEnd Date {Fri Aug 31 2012 03:00:00 GMT+0300} busyStart Date {Fri Aug 10 2012 03:00:00 GMT+0300}. But date Date {Sat Aug 11 2012 00:00:00 GMT+0300} – Dmytro Zarezenko Aug 14 '12 at 11:33
  • Why start and end dates with 03:00:00 ? :) And date with 00:00:00. That's why = conditions is not works. – Dmytro Zarezenko Aug 14 '12 at 11:35

2 Answers2

2

RESOLVED

I have changed my code. Added setHours(0, 0, 0, 0) to start and end dates initialization.

beforeShowDay: function(date) {
            var cssClass = '';

            for (var i=0; i < busyStarts.length; i++) {
                var busyStart = new Date(busyStarts[i]).setHours(0, 0, 0, 0);
                var busyEnd = new Date(busyEnds[i]).setHours(0, 0, 0, 0);
                if (date >= busyStart && date <= busyEnd) {
                    cssClass = 'ui-state-disabled busy_date';
                }
            }

            return [true, cssClass];
        }
Dmytro Zarezenko
  • 10,526
  • 11
  • 62
  • 104
  • Thanks for submitting that solution! I'm actually actively developing using the DatePicker and if I run into your situation, it will be nice to know where to look first! – Jaime Torres Aug 14 '12 at 13:21
0

Try this statement:

beforeShowDay: function(date) {
        var cssClass = '';

        for (var i=0; i < busyStarts.length; i++) {
            var date = new Date(date),
                busyStart = new Date(busyStarts[i]),
                busyEnd = new Date(busyEnds[i]);
            if (date.getTime() >= busyStart.getTime() && date.getTime() <= busyEnd.getTime()) {
                cssClass = 'ui-state-disabled busy_date';
            }
        }

        return [true, cssClass];
    }

getTime() converts your Date object to the time passed since January 1, 1970, 00:00:00 UTC in milisecond. This gives you an integer that you can easily compare.

Jan Beck
  • 1,000
  • 7
  • 13