JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Date comparrison</h1>
<div id="arrival"></div>
<form action="" method="POST">

    <div class="row">
        <label for="arrival">Arrival</label>
        <input type="date" id="arrival">
    </div>

    <div class="row">
        <label for="checkout">Checkout</label>
        <input type="date" id="checkout">
    </div>

    <div class="row">
        <input type="submit" id="submit">
    </div>

</form>

JavaScript

var submit_button = document.querySelector('#submit');
    var arrival = document.querySelector('#arrival');
    var checkout = document.querySelector('#checkout');

checkout.onblur = checkDates;

function hideError(selector) {
     document.getElementById(selector).innerHTML = null;   
}
function displayError(selector, text) {
     document.getElementById(selector).innerHTML = text;   
}
function checkDates(){
    var valid = true;

    if(isValidDate(arrival.value) && isValidDate(checkout.value)){
        valid = false;
        var arrival_date = new Date(arrival.value).valueOf();
        var checkout_date = new Date(checkout.value).valueOf();
        if(arrival_date > checkout_date){
            valid = false;
        }
    }else{
        valid = false;
        displayError('arrival', 'That date is invalid');
    // There was an invalid else statement
    }
    if(valid) hideError('arrival');
    return valid;
}



    function isValidDate(str){
        var datePattern = /^\d{2,4}\-\d{1,2}\-\d{1,2}$/;

        return datePattern.test(str)
    }

    submit_button.onclick = function(){
        console.log(checkDates());

        return false;
    }