我需要复制谷歌分析日期选择器(加上一些新的选项)。谁能告诉我如何突出显示日历上两个日期之间的所有单元格。我的基本JavaScript还可以,但我想我有点超出了我的能力范围。
我使用的是JQuery 1.5.1和JQuery UI 1.8.14。
发布于 2012-02-07 13:27:00
下面是一个使用内置'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-10-27 04:01:38
在需要复制谷歌分析日期选择器以及。我知道您问的只是关于突出显示单元格的问题,但是如果其他人更喜欢完整的解决方案,您可以从另一个问题中看到我的答案:jquery google analytics datepicker
发布于 2012-02-05 20:44:53
我变得孤注一掷,想出了一个自己的解决方案。它不是很漂亮,但我将详细介绍它。
我可以构造一个div,其中包含文本框、按钮和看起来像Google Analytics控件的日期选择器,但我无法使日期选择器正常工作。最后,我想到了创建一个切换变量来跟踪您选择的日期(开始日期或结束日期)的想法。在自定义onSelect事件处理程序中使用该变量效果很好,但我仍然不知道如何突出显示日期之间的单元格。
这花了一段时间,但我慢慢地意识到,我不能用datepicker做到这一点,因为它开箱即用。一旦我弄清楚了这一点,我就能想出一个解决方案。
我的解决方案是添加一个名为afterSelect的新事件。这是在所有内部调整和格式化完成后运行的代码。然后,我编写了一个函数,在给定datepicker日历中的一个单元格的情况下,该函数将返回它表示的日期。我使用jQuery查找具有"ui-state-default“类的所有元素来标识日历日期单元格。有了日期函数和所有日历单元格的列表后,我只需要迭代所有这些单元格,如果日期在正确的范围内,则向父级添加一个新类。
这是非常乏味的,但我能够让它工作。
https://stackoverflow.com/questions/9055551
复制