Вставьте все оставшиеся даты до определенной даты в слайдер

Question

Я использую ползунок начальной загрузки для калькулятора процентов, где я могу скользить сумму от 0 до 15.000 датских крон и другой ползунок, который содержит оставшиеся дни до определенных дат.

Эти два ползунка будут рассчитывать проценты, когда деньги вставляются в определенные даты.

Моя проблема сейчас в том, что я хочу, чтобы во всплывающей подсказке показывались последовательные даты, то есть при загрузке страницы ползунок запускается в текущую дату (3 марта 2016 года), затем, когда я перемещаю его на 4 шага, всплывающая подсказка должна отображаться 7 марта 2016 года, и если я сдвиньте его 30 шагов, это должно показать 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");

Answer 1

Вы можете использовать момент add и момент 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">