JSFiddle - React, Tailwind, and code Playground

by stelios13

HTML

<body>
    <form id="form">
         <h1><b>Please enter data</b></h1>

        <hr size="3" />
        <br>
        <label for="title">Start Date</label>
        <input id="datepicker1" type="text" />
        <br>
        <label for="name">End Date</label>
        <input id="datepicker2" type="text" />
        <br>Result:
        <input type="text" id="txtResult" readonly="readonly" />
        <br />
        <br>
        <input type="button" id="btnSave" value="Save" onclick="insert();">
        <input type="button" value="Get Difference" onclick="GetDifference();">
        <br>
         <h2><b>Data:</b></h2>

        <hr>
    </form>
    <div id="display"></div>
</body>

</html>

JavaScript

var startDate = [];
var endDate = [];

function insert() {
    var newStartDate = new Date(document.getElementById('datepicker1').value);
    var newEndDate = new Date(document.getElementById('datepicker2').value);
    startDate.push(newStartDate);
    endDate.push(newEndDate);

    var content = "<b>All Elements of the Arrays :</b><br>";
    for (var i = 0; i < startDate.length; i++) {
        content += startDate[i] + "<br>";
    }
    for (var i = 0; i < endDate.length; i++) {
        content += endDate[i] + "<br>";
    }

    document.getElementById('display').innerHTML = content;
    clear_fields();
}

//clears the starting date, ending date and the result fields
function clear_fields() {
    document.getElementById("datepicker1").reset();
    document.getElementById("datepicker2").reset();
    document.getElementById("txtResult").reset();
}

/* calculates the difference between the 2 dates in months
So if we want to do functions with years, we have to say years * 12 */
function difference_between(date1, date2) {
    var result = date2.getMonth() - date1.getMonth() + (12 * (date2.getFullYear() - date1.getFullYear()));
    if (typeof startArray[index] !== 'null' && endArray[index] !== null) {
        if (result <= 60) {
            document.getElementById('datepicker1').reset();
            document.getElementById('datepicker2').reset();
            document.getElementById('txtResult').reset();
        } else {
            alert("Go to the next section");
            document.getElementById('btnSave').disable = true;
        }

        return result;
    }
}

function GetDifference() {
    var dateFrom = new Date(document.getElementById("datepicker1").value);
    var dateTo = new Date(document.getElementById("datepicker2").value);
    document.getElementById("txtResult").value = difference_between(dateFrom, dateTo);

    //Is there a gap of more than 2 months?
    if (endDate.length && (difference_between(endDate[endDate.length - 1], dateFrom)) > 2) {
       ...