<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
var dates = new Array();
function addDates(date) {
if (dates.length > 0) {
dates = [];
}
if (jQuery.inArray(date, dates) < 0){
var i;
var month = date.getMonth()+1;
var day = date.getDate();
var year = date.getFullYear();
for (i=1;i<14;i++){
var value = month + '/' + day + '/' + year;
var dateIsValid = isDate(value);
if (dateIsValid == true) {
day++;
dates.push(value);
} else {
if (month == 12) {
month = 0;
year = year + 1;
day = 0;
}
if (month != 12) {
month = month + 1;
day = 1;
}
var value = month + '/' + day + '/' + year;
dates.push(value);
}
console.log(dateIsValid);
console.log(dates);
}
}
}
function isDate(val) {
var date = new Date(val);
return !isNaN(date.valueOf());
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDates(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>I've created a script where it highlights the next 14 days then it checks if the date is valid or not. If Not it will change the date.
Problem is: When i select the date October 31, 2017 the array should look like this 10/31/2017, 11/1/2017, 11/2/2017,...
But the array returns: 10/31/2017, 11/1/2017, 11/1/2017, 11/2/2017, ...
thanks in advance
Here is the solution using moment.js , it is very easy , you don't need to use that complicated coding which you have. It is add a 14 days in selected date.Moment.js is automatically handle the month change , year change etc , so you don't need that extra conditions which is for change month,year,date etc.
var dates = new Array();
function addDa(date){
dates = [];
var selected_date = moment(date);
var last_date = moment(date).add(14, 'days');
for (var dat=selected_date; dat <= last_date; dat.add(1, 'days'))
{
dates.push(dat.format('MM/DD/YYYY'));
}
console.log(dates);
}
jQuery(function () {
jQuery("#datepicker").datepicker({
autoclose: false,
onSelect: function (dateText, inst) {
var date = new Date($(this).datepicker('getDate'));
addDa(date);
},
beforeShowDay: function (date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.0/moment.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Try It</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>