I'm new to JavaScript. So please don't go harsh on me.
After the StartDate gets selected, the ExpectedEndDate and the EndDate must start with StartDate + 1 day and end in 6 months. Other dates must be disabled in the ExpectedEndDate and EndDate.
Here the futureInput.Max works fine. But the futureInput.Min doesn't work. I couldn't find where it went wrong.
$(document).ready(()=>{
var startInput = $('#StartDate')[0];
var expectedEndInput = $('#ExpectedEndDate')[0];
var endInput = $('#EndDate')[0];
startInput.addEventListener('change', (evt)=>{
var EndTime = new Date($("#StartDate").val());
var dd = String(EndTime.getDate() + 1);
var mm = String(EndTime.getMonth() + 6);
var yyyy = EndTime.getFullYear();
var MaxTime = yyyy + '-' + mm + '-' + dd;
var StartTime = new Date($("#StartDate").val());
var dd = String(StartTime.getDate() + 1);
var mm = String(StartTime.getMonth() + 1);
var yyyy = StartTime.getFullYear();
var MinTime = yyyy + '-' + mm + '-' + dd;
debugger
[expectedEndInput, endInput].forEach((futureInput)=> {
futureInput.min = MinTime;
futureInput.max = MaxTime;
debugger
})
})
})
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<input type="date" id="StartDate" />
<input type="date" id="ExpectedEndDate" />
<input type="date" id="EndDate" />
In order to react to every change of the <input id="StartDate">, we need to set a change event listener for it.
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function millisecondsToDateString(milliseconds) {
// to convert Date to yyyy-mm-dd use Swedish locale
return new Date(milliseconds).toLocaleDateString('sv-SE');
}
$(document).ready(()=>{
var startInput = $('#StartDate')[0];
var expectedEndInput = $('#ExpectedEndDate')[0];
var endInput = $('#EndDate')[0];
startInput.addEventListener('change', (evt)=>{
// called every time the startInput's date value changes
// get start date as milliseconds since 1970 New Year
var startTime = startInput.valueAsNumber;
// startDate + 1 day
var minTime = startTime + daysToMilliseconds(1);
// startDate + 180 days (6 months)
var maxTime = startTime + daysToMilliseconds(30 * 6);
[expectedEndInput,endInput].forEach((futureInput)=> {
futureInput.min = millisecondsToDateString(minTime);
futureInput.max = millisecondsToDateString(maxTime);
});
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="StartDate" />
<input type="date" id="ExpectedEndDate" />
<input type="date" id="EndDate" />Refer to this SO answer for conversion of Date objects to yyyy-mm-dd.
Only values of yyyy-mm-dd are accepted for input date min & max.