复制Google Analytics日期选取器

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

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

来源

2012-01-29 wcm

下面是一个使用内置的“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'); 
        } 
       } 
      } 
     } 
    }); 
});

来源

2012-02-07 13:26:59 pete

美丽。我真希望你早点出现，因为我更喜欢你的解决方案。 – wcm 2012-02-07 16:01:14

警告。有一个错误涉及'sel =（new Date（range.stop - range.start））。getDate（）;'因为我忘记测试同一天连续两次点击。如果将该行更改为'sel =（range.start.toString（）=== range.stop.toString（））？ 0 :(新日期（range.stop - range.start））。getDate（）;'，这将修复错误。修改答案以反映更新的代码。更新了jsFiddle：http://jsfiddle.net/7Betq/3/ – pete 2012-02-07 18:28:23

我变得绝望，想出了自己的解决方案。这不太好，但我会详细说明。

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

这花了一段时间，但我慢慢意识到，我不能用日期选择器来做它，因为它开箱即用。一旦我明白了这一点，我就能够想出一个解决方案。

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

这是非常乏味的，但我能够使它的工作。

来源

2012-02-05 20:44:52 wcm

在复制谷歌分析日期选择器以及必要的。我知道你刚才问的突出细胞，但如果别人宁愿完整的解决方案，你可以从另一个问题看我的答案：jquery google analytics datepicker

Date Ranges Widget

来源

2012-10-27 04:01:37 petrkotek

复制Google Analytics日期选取器

回答

相关问题