每小时制作jQRangeSlider的比例

我正在使用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"); } }] }); 

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