jquery-ui-datepicker – 复制Google Analytics DateRange选择器

我需要复制Google Analytics日期选择器(以及一些新选项).任何人都可以告诉我如何在两个日期之间突出显示日历上的所有单元格.我的基本 JavaScript是可以的,但我认为我有点超出我的深度.

我正在使用JQuery 1.5.1和JQuery UI 1.8.14.

这是使用内置’onSelect’事件( 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');
                    }
                }
            }
        }
    });
});