I want to display the current month automatically when the month goes from one month to next month in the maximum range slider in jquery ui
Note: Current date is always 01
//range slider in months
function formatDate(date) {
debugger;
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var monthIndex = date.getMonth();
var year = date.getFullYear();
return monthNames[monthIndex] + ' ' + year;
}
function formatDateTime(dateTime) {
var date = "01";
var month = ("00" + (dateTime.getMonth() + 1)).slice(-2);
var year = dateTime.getFullYear();
var hour = ("00" + dateTime.getHours()).slice(-2);
var minutes = ("00" + dateTime.getMinutes()).slice(-2);
var seconds = ("00" + dateTime.getSeconds()).slice(-2);
return date + "-" + month + "-" + year + " " + hour + ":" + minutes + ":" + seconds;
}
$(function () {
$("#slider-range").slider({
range: true,
min: new Date('2019-01-01').getTime() + 86400000,
max: new Date('2019-12-01').getTime() + 86400000,
step: 86400000,
values: [new Date('2019-04-01').getTime(), new Date('2019-11-01').getTime()],
slide: function (event, ui) {
$("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
},
stop: function (event, ui) {
debugger;
var start = formatDateTime(new Date(ui.values[0]));
var end = formatDateTime(new Date(ui.values[1]));
$('#lblStartDateTime').html(start);
$('#lblEndDateTime').html(end);
//$("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
$.ajax({
data: { MinValue: start, MaxValue: end },
type: "post",
url: apiUrl + "/api/Warehouse/addMinMaxValues",
success: function (data) {
//alert("Data Save: " + data);
}
});
}
});
$("#amount").val(formatDate((new Date($("#slider-range").slider("values", 0)))) +
" - " + formatDate((new Date($("#slider-range").slider("values", 1)))));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold; width:100%">
<div id="slider-range"></div>