JSFiddle - React, Tailwind, and code Playground

by jfriend00

CSS

.invalid {color: red;}
body {font-family: "Courier New"; font-size: 13px;}

JavaScript

function checkDate(str) {
    var matches = str.match(/(\d{1,2})[- \/](\d{1,2})[- \/](\d{4})/);
    if (!matches) return;
    
    // convert pieces to numbers
    // make a date object out of it
    var month = parseInt(matches[1], 10);
    var day = parseInt(matches[2], 10);
    var year = parseInt(matches[3], 10);
    var date = new Date(year, month - 1, day);
    if (!date || !date.getTime()) return;
    
    // make sure we didn't have any illegal 
    // month or day values that the date constructor
    // coerced into valid values
    if (date.getMonth() + 1 != month ||
        date.getFullYear() != year ||
        date.getDate() != day) {
            return;
        }
    return(date);
}

var inputTests = [
    "3 22 1978",
    "foo/2/1991",
    "12-25-2001",
    "15-1-1971",    // illegal month
    "0-1-1971",     // illegal month
    "1-1-99",       // illegal year
    "1-32-2001",    // illegal day
    "2-29-2010",    // illegal day
    "1/1/2014"
];

var output = [];
for (var i = 0; i < inputTests.length; i++) {
    var date = checkDate(inputTests[i]);
    output.push(inputTests[i] + ": " + (date ? date.toDateString() : "<span class='invalid'>Invalid Date</span>"));
}

document.body.innerHTML = output.join("<br>");