Создание шкалы jQRangeSlider ежечасно

Question

Создание шкалы jQRangeSlider ежечасно

0

Я использую jQRangeSlider для своей панели мониторинга. Я пытаюсь использовать параметр масштаба, который предоставляет виджет, используя фрагмент, указанный в документации. Однако мой ползунок Date имеет диапазон 14 дней. Что я хочу, так это то, что я должен иметь линейку отмеченные часами дня, а не месяц, показанный в документации на

link [ http://ghusse.github.io/jQRangeSlider/options.html#scalesOption]

Я пытаюсь сделать это, используя следующий фрагмент:

$("#slider").dateRangeSlider({
bounds: {"min": min2,"max":max2},
      range:{
          min: {hours: 1}},
          scales: [{
           first: function(value){ return value; },
           end: function(value) {return value; },
           next: function(value){
           var next = new Date(value);
           return new Date(next.setHours(value.getHours() + 1));
      },
      label: function(value){
        return months[value.getHours()];
      },
      format: function(tickContainer, tickStart, tickEnd){
        tickContainer.addClass("myCustomClass");
      }
    }]
      });

Nisha 04 июнь 2014, в 09:29

Источник

Теги:

jquery

jquery-ui

jquery-plugins

1 ответ

Ещё вопросы

ghusse · Accepted Answer · 2014-06-04T05-38-00.000Z

Кажется, что это хорошо, за исключением опции label и некоторых синтаксических ошибок, вы можете попробовать этот код:

var min2 = new Date("2014-01-01"),
    max2 = new Date("2014-01-02");

function addZero(val) {
    if (val < 10) {
        return "0" + val;
    }

    return val;
}

$("#slider").dateRangeSlider({
    bounds: {
        "min": min2,
        "max": max2
    },
    range: {
        min: {
            hours: 1
        }
    },
    scales: [{
        first: function (value) {
            return value;
        },
        end: function (value) {
            return value;
        },
        next: function (value) {
            var next = new Date(value);
            return new Date(next.setHours(value.getHours() + 1));

        },
        label: function (value) {
            return value.getHours();
        },
        format: function (tickContainer, tickStart, tickEnd) {
            tickContainer.addClass("myCustomClass");
        }
    }],
    formatter: function (val) {
        var h = val.getHours(),
            m = val.getMinutes();

        return addZero(h) + ':' + addZero(m);
    },
    defaultValues: {
        min: new Date("2014-01-01T05:00:00Z"),
        max: new Date("2014-01-01T08:00:00Z")
    }
});

Вы можете увидеть его здесь: http://jsfiddle.net/ghusse/LJrYf/1/

Не работает. Пока не масштабируется. В слайдере ничего не изменилось. :(
Я обновил код, чтобы он заработал.
Круто. !!. Работает нормально сейчас. !!. Просто для моего 14-дневного диапазона слайдер выглядит довольно многолюдно. Тем не менее, отличная помощь. !!. Спасибо.
Можно ли показать дату вместе со временем в форматере. Если да, то как?
Настройте обратный вызов форматирования, чтобы он возвращал то, что вы хотите отобразить
Готово. !!. Могу ли я получить data.values.min или data.values.max от ползунка, даже если ползунок не перемещен, что-то вроде userValuesUnchanged ???
Вы можете использовать метод с именем values. Взгляните на документацию по этому методу, чтобы узнать, как его использовать.
эй, черт возьми, я хочу изменить «синий» цвет ползунка на другой, который подходит моей приборной панели. Hoaw это может быть сделано ??
Там много цветов. Какой мне поменять ??
вот этот: github.com/ghusse/jQRangeSlider/blob/master/css/iThing.css#L152
@ ghusse .. Как я могу убедиться, что событие перемещения ползунка вызывается один раз. Я столкнулся с проблемой, которая описана здесь stackoverflow.com/questions/25759135/… и решением такого рода stackoverflow.com/questions/17866972/… может помочь, но я не знаю, как это сделать для события UserValuesChanged в dateRangeSlider
У вас есть пример здесь: ghusse.github.io/jQRangeSlider/… что именно вам нужно?