jQueryRangeSlider显示季度和月份

Question

全部， 我正在使用jQRangeSlider（http://ghusse.github.io/jQRangeSlider/）来满足我的要求。我想要一个日期范围选择器，

1. 在顶部显示当前的会计年度。
2. 显示中间的季度（Q1，Q2，Q3，Q4）。
3. 显示底部的月份。

请参阅下面的图片。



我可以让这几个月正常渲染，但我似乎无法弄清楚如何展示季度（Q1，Q2，Q3，Q4）和2017财年的标题。

使用当前的插件甚至可能无法实现，所以如果有人有其他建议，我会全力以赴。

这是我到目前为止所做的：

var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth();
var todayDay = today.getDate();

var nextYear = todayYear + 1;
var nextMonth = todayMonth +1;
var nextDay = 1;

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
$("#slider").dateRangeSlider({
    bounds: {min: new Date(todayYear, 09, 01), max: new Date(nextYear, 08, 30)},
    defaultValues: {min: new Date(todayYear, todayMonth, todayDay), max: new Date(nextYear, nextMonth, nextDay)},
    scales: [{
      first: function(value){ 
        return value; 
        },
      end: function(value) {
        return value; 
        },
      next: function(value){
        var next = new Date(value);
        return new Date(next.setMonth(value.getMonth() + 1));
      },
      label: function(value){
        return months[value.getMonth()];
      },
      format: function(tickContainer, tickStart, tickEnd){
        tickContainer.addClass("myCustomClass");
      }
    }]
});

我知道我应该使用二级量表，但我不确定如何从季度角度实现这一点。

这是我的jsFiddle，来自另一个例子：http://jsfiddle.net/zegr37d9/1/

提前感谢您的帮助。

Answer 1

关注这篇文章。我们最终决定不执行上述的整个要求（财政/季度/月）。但我相信这可以通过在#slider元素中滑动几个div来实现。