JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<form>
    <input type="text" id="input" required autocomplete="off" placeholder="yyyy.mm.dd" pattern="^(19|20)\d\d[.](0[1-9]|1[012])[.](0[1-9]|[12][0-9]|3[01])$" required="" />
    <button>Check</button>
</form>
<pre id="values"></pre>
<span id="past">the input date is in the past</span>

CSS

#past { display:none; }

JavaScript

var mlptoday = {};

var timer = setTimeout(today,500);

function today(){
    var d = new Date();
    mlptoday.year = d.getFullYear(); //output: "2013"
    mlptoday.month = checkTime(d.getMonth()+1); //output: "01"
    mlptoday.date = checkTime(d.getDate()); //output: "27"
    
	$('#values').html(JSON.stringify(mlptoday));
}


function checkTime(i) { if (i<10){i="0" + i} return i }

$(document).ready(function(){
    $('form').submit(function(e){
        e.preventDefault();
    	var remTime = $('input').val(); //user input
        var remTimeArray = remTime.split('.') //output: ["2013","01","27"]
        if (
            !(remTimeArray[0] >= mlptoday.year &&
            remTimeArray[1] >= mlptoday.month) ||
            !((remTimeArray[1] == mlptoday.month) ? Boolean(remTimeArray[2]*1 >= mlptoday.date) : true)
        ){
            $('#past').fadeIn('fast').delay(500).fadeOut('fast');
        }
    })
})