Check and display message if the date is less than the Current Date

Question

I have a field on my system where I would like to display a real-time message if the date typed is earlier than today. It wouldn’t be a validation, just show the alert. I’m having difficulties with the condition and syntax for not having Datetime.Now. Follow the code:

<p>
<label>Último Dia:</label>
<input type="text" class="Data" name="DefinirUltimoDia" id='UltimoDiaDemissao' value=""  />
</p>

JS

var formulario = document.getElementById(fAgentes),
	    UltimoDiaDemissao = document.getElementById(UltimoDiaDemissao);

        form.onsubmit = function () {
            if (UltimoDiaDemissao.value < DateTime.Now) {
                alert("Atenção: Data do último dia anterior a data atual");
                return false;
            } 

Answer 1

Well, initially, I noticed that you referenced the form with the variable formulario, but used the onsubmit in a variable form. I don’t know if it was mistake or purpose, but anyway.

To get the current date, just create a date object without parameters. Already the date typed by the user will come as a string, not a date, so it needs to be parsed.

From what I understand, want to see in real time, before the person submit the form, then in case should use the event onfocusout, the event onsubmit will only give Trigger when the form is sent.

Behold:

var input = document.getElementById('UltimoDiaDemissao'),
    hoje = new Date().setHours(-1),
    ultimoDiaDemissao;

    input.onblur = function () {
       ultimoDiaDemissao = new Date(input.value.split('/').reverse().join('-')).setHours(24);
       if (ultimoDiaDemissao < hoje) {
           alert("Atenção: Data do último dia anterior a data atual");
       } 
}

Okay, now let’s get the explanation. new Date() returns the current date, in a date object. Already all that code for the UltimoDiaDemissao works like this:

To move the date to the object Date, need to send a string in format yyyy-mm-dd, and its string comes in Brazilian format. Then the .split('/') will divide the day, month and year into 3 parts in an array, the reverse() will invert the order of the array, putting the year in front and the day in the end, and then join everything in a string with the join('-') separated with dash instead of slash. Only then at the end of the setHours(24) to fix a problem with UTC time zone, if you need details about it take a look at the object Date javascript and how it works.

Once this is done we have two date objects to be compared correctly, and the rest is just activate whenever the person takes the focus of the date input.

Functional jsfiddle