验证最短日期JavaScript

Question

I'm trying to validate the minimum date (today) from an object type="date" for a CheckIn until the Checkout and then take the number of days to another variable for further use, all with a button. My problem is that I don't really understand how to compare the dates.

html

<label for="date1"> Checkin </label>
    <input type="date" id="date1">

<label for="date2"> Checkout </label>
    <input type="date" id="date2">

<button type="button" id="btn1" required>Action</button>

js

let btn1 = document.getElementById('btn1');
let checkIn = document.getElementById('date1');
btn1.addEventListener('click', minDate);

function minDate(){
    let nowDate = new Date;
    if(checkIn.value < Date){

        alert("invalid date")
    }

}

The function does alert if the date is lower than today but also shows the alert for any date after today.

Answer 1

Helo Christy.

In order to validate our date, we must first convert the inputs from the form into javascript Date objects . We can do that, by passing the input into the constructor of the class. After that, we can simply compare the values.

 const btn1 = document.getElementById("btn1"); const checkIn = document.getElementById("date1"); btn1.addEventListener("click", minDate); function minDate() { const checkInDate = new Date(checkIn.value); const nowDate = new Date(); if (checkInDate > nowDate) { alert("Invalid date provided"); } } 

 <label for="date1"> Checkin </label> <input type="date" id="date1"> <label for="date2"> Checkout </label> <input type="date" id="date2"> <button type="button" id="btn1" required>Action</button> 

Answer 2

Try to do that:

function minDate(){

    const nowDate = new Date();
    const valDate = new Date(checkIn.value)

    if(valDate < nowDate){

        alert("invalid date")
    }

}