Validating input type dates with jquery

Navigation
2

The code below for date comparison works for condition if >= 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><formaction="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><formaction="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>

WHY?

    
asked by anonymous 23.08.2017 / 20:57

1 answer

2

The Date object can be used with the & gt ;, operators, . Since operators ==,! =, === and! === require you to use date.getTime() .

Here is your adjusted code, and you can read more about the Date object here: link 

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><formaction="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 constructors: 

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

In 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.

In order to guarantee the expected result, I recommend using the 4th constructor mentioned above because it guarantees that the instantiated date will be the one that is passed by parameter.

To read more about dates in JavaScript: link To read more about date formats in JavaScript: link

    
23.08.2017 / 21:08
Search in multiple tables Duplicate the result of Select Postgresql