Question

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

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

Answer 1

还需要复制Google Analytics日期选择器。我知道你问的是突出细胞，但如果其他人更喜欢完整的解决方案，你可以从另一个问题看到我的回答：jquery google analytics datepicker

Date Ranges Widget

Answer 2

以下是使用内置“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');
                    }
                }
            }
        }
    });
});

Answer 3

我变得绝望，并自己想出了一个解决方案。它不漂亮，但我会详细说明。

我能够构建一个div，其文本框，按钮和日期选择器看起来像Google Analytics控件，但我无法使日期选择器正常工作。最后，我提出了创建一个切换变量的想法，该变量跟踪您选择的日期（开始日期或结束日期）。在自定义的onSelect事件处理程序中使用该变量运行良好，但我仍然无法弄清楚如何在日期之间获取单元格以突出显示。

花了一段时间，但我慢慢意识到我无法使用日期选择器，因为它已经开箱即用。一旦我弄明白，我就能想出一个解决方案。

我的解决方案是在AfterSelect后添加一个新的事件调用。这是在完成所有内部调整和格式化后运行的代码。然后我写了一个函数，给定datepicker日历中的一个单元格，它将返回它所代表的日期。我通过使用jQuery查找具有“ui-state-default”类的所有元素来识别日历日期单元格。一旦我有了日期函数和所有日历单元格的列表，我只需要遍历所有日历单元格，如果日期在正确的范围内，则向父级添加一个新类。

这非常乏味，但我能够使它发挥作用。

复制Google Analytics DateRange选择器

3 个答案: