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

Question

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

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

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