Question

I need to replicate the Google Analytics date picker (plus a few new options). Can anyone tell me how to highlight all the cells on a calendar between two dates. My basic JavaScript is OK but I think I’m getting a bit out of my depth.

I’m using JQuery 1.5.1 and JQuery UI 1.8.14.

Answer 1

Here’s a solution using the built-in ‘onSelect’ event (jsFiddle):

$(document).ready(function() {
    'use strict';
    var range = {
        'start': null,
        'stop': null
    };
    $('#picker').datepicker({
        'onSelect': function(dateText, inst) {
            var d, ds, i, sel, $this = $(this);
            if (range.start === null || range.stop === null) {
                if (range.start === null) {
                    range.start = new Date(dateText);
                } else {
                    range.stop = new Date(dateText);
                }
            }
            if (range.start !== null && range.stop !== null) {
                if ($this.find('td').hasClass('selected')) {
                    //clear selected range
                    $this.children().removeClass('selected');
                    range.start = new Date(dateText);
                    range.stop = null;
                    //call internal method '_updateDatepicker'.
                    inst.inline = true;
                } else {
                    //prevent internal method '_updateDatepicker' from being called.
                    inst.inline = false;
                    if (range.start > range.stop) {
                        d = range.stop;
                        range.stop = range.start;
                        range.start = d;
                    }
                    sel = (range.start.toString() === range.stop.toString()) ? 0 : (new Date(range.stop - range.start)).getDate();
                    for (i = 0; i <= sel; i += 1) {
                        ds = (range.start.getMonth() + 1).toString() + '/' + (range.start.getDate() + i).toString() + '/' + (range.start.getFullYear()).toString();
                        d = new Date(ds);
                        $this.find('td a').filter(function(index) {
                            return $(this).text() === d.getDate().toString();
                        }).parents('td').addClass('selected');
                    }
                }
            }
        }
    });
});