每小时制作jQRangeSlider的规模 [英] Making scale of jQRangeSlider hourly

问题描述

我正在使用jQRangeSlider作为我的仪表板。我正在尝试使用文档中给出的小部件提供的缩放选项。但是，我的日期滑块的范围是14天。我想要的是我应该标有一天一小时的标尺而不是文件中显示的月份

I am using jQRangeSlider for my dashboard.I am trying to use the scale option that the widget provides using the snippet given in the documentation.However, my Date slider has a range of 14 days.What I want is that I should have a ruler marked with hours of a day rather than the month shown in the documentation at

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

我正在尝试使用以下代码段执行此操作：

I am trying to do this using the following snippet:

$("#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");
      }
    }]
      });

推荐答案

看起来不错，除了 label 选项和一些语法错误，您可以尝试以下代码：

It seems to be good, except for the label option and some syntax errors, you can try this code:

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/

You can see it live here: http://jsfiddle.net/ghusse/LJrYf/1/

这篇关于每小时制作jQRangeSlider的规模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！