将直到特定日期的所有剩余日期插入滑块答案

【问题标题】：Insert all remaining dates until a specific date into a slider将直到特定日期的所有剩余日期插入滑块
【发布时间】：2016-03-03 13:29:49
【问题描述】：

我正在为利息计算器使用引导滑块，我可以在其中滑动 0 - 15.000 丹麦克朗的金额，另一个滑块包含直到特定日期的剩余天数。

这两个滑块将计算在特定日期插入资金时的利息。

我现在的问题是我希望滑块工具提示显示连续日期，即在页面加载时，滑块将从今天的日期（2016 年 3 月 3 日）开始，然后当我滑动 4 步时，工具提示应该显示 2016 年 3 月 7 日，如果我滑动 30 步，它应该会显示 2 月 2 日。

滑块初始化如下：

$(".date").slider({
    tooltip: 'always',
    min: 1,
    max: daysRemaining,
    step: 1,
    value: daysRemaining,
    formatter: function (daysRemaining) {
       DateOutputFunction here
     }
 });

daysRemaining 使用 moment.js 找到

var today = moment();
var lastDate = moment("20161212");
var daysRemaining = lastDate.diff(today, "days");

【问题讨论】：

标签： javascript html twitter-bootstrap-3 momentjs bootstrap-slider

【解决方案1】：

你可以使用 moment add 和 moment format 来获得你需要的东西，例如：

var today = moment();
var lastDate = moment("20161212");
var daysRemaining = lastDate.diff(today, "days");

$(".date").slider({
    tooltip: 'always',
    min: 1,
    max: daysRemaining,
    step: 1,
    value: daysRemaining,
    formatter: function (value) {
        var today = moment();
        var day = today.add(value, "days");
        return day.format("D MMMM YYYY");
    }
 });

.slider{
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.1/bootstrap-slider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.1/css/bootstrap-slider.min.css">

<input type="text" class="date">

【讨论】：