Question

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

中文件中显示的月份

链路[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");
      }
    }]
      });

Answer 1

似乎很好，除了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/

每小时制作jQRangeSlider的规模

1 个答案: