I'm currently stuck to find a way to;
- When user select 2 dates (Check in & Check out), it'll count how many days - my count days function totally not working
- Then, to check the date range if it falls under certain dates have different rates- I stored the rates and range of dates in arrays, then check wit if statement - It might be another ways to iterate those rates and range of dates
- Finally, to display how much $ the total stay
This is for my learning purposes, not for commercial. This question might be useful for other learners as well. I know we can use other frameworks but I don't want to use it.
document.getElementById('checkInDate').addEventListener("focus", dateInputMinMax);
document.getElementById('checkOutDate').addEventListener("focus", dateInputMinMax);
function dateInputMinMax(){
let todayDate = new Date().toISOString();
let todayDateISO = todayDate.slice(0,10);
document.getElementById('checkInDate').min = todayDateISO;
document.getElementById('checkOutDate').min = todayDateISO;
//--------- Max: ADD 3 months to today's date -----------
let date = new Date();
//change the date to be today + 3 months
date.setMonth(date.getMonth()+3);
let dateThreeMonthsISO = date.toISOString();
dateThreeMonthsISO = dateThreeMonthsISO.slice(0,10);
document.getElementById('checkInDate').max = dateThreeMonthsISO;
document.getElementById('checkOutDate').max = dateThreeMonthsISO;
}
var rates = new Array();
rates[0] = 200;
rates[1] = 200;
rates[2] = 220;
rates[3] = 250;
var dateStartQ1 = new Date("2021-06-01");
var dateEndQ1 = new Date("2021-08-31");
var dateStartQ2 = new Date("2021-09-01");
var dateEndQ2 = new Date("2021-12-18");
var dateStartQ3 = new Date("2022-02-01");
var dateEndQ3 = new Date("2022-05-31");
var dateStartQ4 = new Date("2021-12-19");
var dateEndQ4 = new Date("2022-01-31");
var a, b, c, d;
dateStartQ1, dateEndQ1 = a;
dateStartQ2, dateEndQ2 = b;
dateStartQ3, dateEndQ3 = c;
dateStartQ4, dateEndQ4 = d;
function rateCalculator(){
if (dateInputMinMax == "") {
alert("Invalid Input");
return false;
} else if (dateInputMinMax == a) {
alert(rates[0]);
return false;
} else if (dateInputMinMax == b) {
alert(rates[1]);
return false;
} else if (dateInputMinMax == c) {
alert(rates[2]);
return false;
} else {
alert(rates[3]);
return false;
}
}
document.getElementById('totalDays').innerHTML = rateCalculator();
<form>
<label for="check_in">Check-In Date : </label>
<input type="date" id="checkInDate" min="">
<label for="check_out">Check-Out Date : </label>
<input type="date" id="checkOutDate">
<input type="submit" onclick="dateInputMinMax()">
<label for="totalDays" id="totalDays">Total Stay: </label>
</form>