jQuery datepicker start date interval not showing

Question

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:

But I see this result:

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

When I looked into debugger:

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?

Answer 1

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];
        }

Answer 2

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.