Репликация средства выбора Google Analytics DateRange - PullRequest
Новая
       13

Репликация средства выбора Google Analytics DateRange

3 голосов
/ 29 января 2012

Мне нужно повторить выбор даты в Google Analytics (плюс несколько новых опций). Может кто-нибудь сказать мне, как выделить все ячейки в календаре между двумя датами. Мой базовый JavaScript в порядке, но я думаю, что немного теряю глубину.

Я использую JQuery 1.5.1 и JQuery UI 1.8.14.

Ответы [ 3 ]

4 голосов
/ 27 октября 2012

Требуется также для копирования даты выбора Google Analytics.Я знаю, что вы спрашивали только о выделении ячеек, но если кто-то еще предпочитает полное решение, вы можете увидеть мой ответ на другой вопрос: jquery google analytics datepicker

Date Ranges Widget

2 голосов
/ 07 февраля 2012

Вот решение с использованием встроенного события 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');
                    }
                }
            }
        }
    });
});
1 голос
/ 06 февраля 2012

Я впал в отчаяние и сам нашел решение. Это было не красиво, но я подробно опишу это.

Мне удалось создать div, в котором были текстовые поля, кнопки и средство выбора даты, которое выглядело как элемент управления Google Analytics, но я не смог заставить работать средство выбора даты должным образом. В конце концов, мне пришла в голову идея создания переключаемой переменной, которая бы отслеживала, какую дату вы выбрали (начальную или конечную дату). Использование этой переменной в пользовательском обработчике события onSelect работало хорошо, но я все еще не мог понять, как получить ячейки между датами для выделения.

Это заняло некоторое время, но я постепенно осознал, что не могу сделать это с помощью средства выбора даты, поскольку оно существовало из коробки. Как только я понял это, я смог найти решение.

Моим решением было добавить новый вызов события afterSelect. Это код, который запускается после завершения всех внутренних настроек и форматирования. Затем я написал функцию, которая, учитывая ячейку в календаре выбора даты, будет возвращать дату, которую она представляет. Я определил ячейки календарной даты с помощью jQuery, чтобы найти все элементы, которые имели класс «ui-state-default». После того, как у меня появилась функция даты и список всех ячеек календаря, мне просто нужно было перебрать все из них и, если дата находилась в правильном диапазоне, добавить новый класс для родительского элемента.

Это было чрезвычайно утомительно, но я смог заставить его работать.

...