带有季度和月份显示的 jQuery 范围滑块

Question

所有， 我正在使用 jQRangeSlider (http://ghusse.github.io/jQRangeSlider/) 来满足我的要求。我正在尝试获取一个日期范围选择器，

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

请看下面提供的图片。

我可以正确渲染月份，但我似乎无法弄清楚如何同时显示季度（Q1、Q2、Q3、Q4）和 FY17 标题。

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

这是我目前所拥有的：

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

我知道我应该使用二级量表，但我不确定如何从 Quarter 的角度来实现它。

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

提前感谢您的帮助。

Answer 1

只是为了跟进这篇文章。我们最终决定不满足上述要求（财年/季度/月）。但我相信这可以通过在#slider 元素中滑动几个 div 来实现。