Validation of input type date dates with jquery

Question

The code below for date comparison works for if condition >= and Else.

function validaDatas(){
    var dataInicial = new Date($("input[name='datainicial']").val());
    var dataFinal = new Date($("input[name='datafinal']").val());
    if (!dataInicial || !dataFinal) return false;
    if (dataInicial >= dataFinal) {
        alert("dataInicial maior que DataFinal ou datas iguais");
    }else{
    	alert("dataInicial menor que DataFinal");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:void(0)" onsubmit="return validaDatas()">
    <div>
    <label>Data inicial:</label>
    <input type="date" name="datainicial" />
    <label>Data Final:</label>
    <input type="date" name="datafinal" />
    </div>
    <button>Enviar</button>
</form>

But if you put a else if separating the condition of equal dates == the script does not work in this condition

function validaDatas(){
    var dataInicial = new Date($("input[name='datainicial']").val());
    var dataFinal = new Date($("input[name='datafinal']").val());
    if (!dataInicial || !dataFinal) return false;
    if (dataInicial > dataFinal) {
        alert("dataInicial maior que DataFinal");
    }else if (dataInicial == dataFinal){
    	alert("dataInicial igual a DataFinal");
    }else{
    	alert("dataInicial menor que DataFinal");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:void(0)" onsubmit="return validaDatas()">
    <div>
    <label>Data inicial:</label>
    <input type="date" name="datainicial" />
    <label>Data Final:</label>
    <input type="date" name="datafinal" />
    </div>
    <button>Enviar</button>
</form>

BECAUSE?

Answer 1

The object Date can be used with operators >, <, <= or >=. Already operators ==, != , === and !== require you to use date.getTime().

Follow your set code, and you can read more about the Date object here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

function validaDatas(){
    var dataInicialSplit = $("input[name='datainicial']").val().split('-');
    var dataFinalSplit = $("input[name='datafinal']").val().split('-');
    var dataInicial = new Date(dataInicialSplit[0], dataInicialSplit[1] - 1, dataInicialSplit[2]);
    var dataFinal = new Date(dataFinalSplit[0], dataFinalSplit[1] - 1, dataFinalSplit[2]);
    if (!dataInicial || !dataFinal) return false;
    if (dataInicial.getTime() > dataFinal.getTime()) {
        alert("dataInicial maior que DataFinal");
    }else if (dataInicial.getTime() == dataFinal.getTime()){
    	alert("dataInicial igual a DataFinal");
    }else{
    	alert("dataInicial menor que DataFinal");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:void(0)" onsubmit="return validaDatas()">
    <div>
    <label>Data inicial:</label>
    <input type="date" name="datainicial" />
    <label>Data Final:</label>
    <input type="date" name="datafinal" />
    </div>
    <button>Enviar</button>
</form>

Note: The creation of a new object Date has 4 possible builders:

new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

In the case of using a string, the computed date will be relative to the time zone, and depending on the time zone the result may vary.

To ensure the expected result, I recommend using the 4th constructor mentioned above because it ensures that the instantiated date will be the one passed by parameter.

To read more about Javascript dates: https://www.w3schools.com/js/js_dates.asp To read more about date formats in Javascript: https://www.w3schools.com/js/js_date_formats.asp