0

I'm currently stuck to find a way to;

  1. When user select 2 dates (Check in & Check out), it'll count how many days - my count days function totally not working
  2. 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
  3. 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>

0 Answers0