javascript - 显示季度和月份的 jQuery 范围 slider

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

我知道我应该使用二级量表，但我不确定如何从四分之一的 Angular 实现它。

这是我的 jsFiddle，从另一个例子派生而来:http://jsfiddle.net/zegr37d9/1/

在此先感谢您的帮助。

Answer 1

只是为了跟进这篇文章。我们最终决定不执行上述全部要求(FY/Quarter/Month)。但我相信这可以通过在 #slider 元素中滑动几个 div 来实现。