Alert message if date and time is older than a value

Question

I have a form with a date and time field, the date field consists of 3 fields: day, month and year. And time field consists of 2 fields, hour and minute.

I want to show an alert if the date is older than 2 months and 60 hours.

HTML:

<div class="container-date">
    <div class="date_day">
        <input type="text" maxlength="2" name="input_day" id="input_day" value="">
    </div>
    <div class="date_month">
        <input type="text" maxlength="2" name="input_month" id="input_month" value="">
    </div>
    <div class="date_year>
        <input type="text" maxlength="4" name="input_year" id="input_year" value="">
    </div>
</div>

<div class="container-time">
    <div class="time_hour>
        <input type="text" maxlength="2" name="input_hour" id="input_hour" value="">
    </div>
    <div class="time_minute">
        <input type="text" maxlength="2" name="input_minute" id="input_minute" value="">
    </div>     
</div>

I can do it with one field only for date, but have now 3 fields that I need.

I tried something like this:

jQuery(document).ready(function($){

    var day = $('#input_day');
    var month = $('#input_month');
    var year = $('#input_year');

    var today = new Date();
    var currentMonth = today.getMonth();

    month.on("input change", function() {
        if ((today.getMonth() + 11) - (this + 11) > 4) {
            console.log('test');
        }
    });
}); 

Answer 1

I'd suggest you to parse the form date, create the comparison date according to the expected period and then return if the formDate is greater than comparisonDate.

Please, let me know if the code below is according to what you expected:

function getFormDate() {
    const formYear = $("#input_year").val();
    const formMonth = $("#input_month").val() - 1;
    const formDay = $("#input_day").val();
    const formHour = $("#input_hour").val();
    const formMinute = $("#input_minute").val();
    return new Date(formYear, formMonth, formDay, formHour, formMinute, 0, 0)
}

function getComparisonDate() {
    const today = new Date()
    let comparisonDate = new Date()
    comparisonDate.setMonth(today.getMonth() - 2)
    comparisonDate.setHours(today.getHours() - 60)
    return comparisonDate
}

function thereIsMissingValue() {
    let anyMissing = false;
    const inputs = $(".container-date input, .container-time input")
    inputs.each(function () {
        if (!$(this).val())
            anyMissing = true
    });
    return anyMissing
}

function displayMessage() {
    const formDate = getFormDate()
    const comparisonDate = getComparisonDate()

    $("#min-allowed-date").text(comparisonDate.toLocaleString())

    const isOlderThanComparison = formDate < comparisonDate
    $(".older-date").toggle(isOlderThanComparison)

    const isInTheFuture = formDate > new Date()
    $(".future-date").toggle(isInTheFuture)

    const isValidDate = !isOlderThanComparison && !isInTheFuture
    $(".valid-date").toggle(isValidDate)
}

function calculate() {
    if (thereIsMissingValue()) {
        $(".container-date-validation").hide()
        return
    }
    $(".container-date-validation").show()

    displayMessage()
}

$('#input_year, #input_month, #input_day, #input_hour, #input_minute').change(function () { calculate(); })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-date">
    <div class="date_day">
        <label>Day</label>
        <input type="text" maxlength="2" name="input_day" id="input_day" value="">
    </div>
    <div class="date_month">
        <label>Month</label>
        <input type="text" maxlength="2" name="input_month" id="input_month" value="">
    </div>
    <div class="date_year">
        <label>Year</label>
        <input type="text" maxlength="4" name="input_year" id="input_year" value="">
    </div>
</div>

<div class="container-time">
    <div class="time_hour">
        <label>Hour</label>
        <input type="text" maxlength="2" name="input_hour" id="input_hour" value="">
    </div>
    <div class="time_minute">
        <label>Minute</label>
        <input type="text" maxlength="2" name="input_minute" id="input_minute" value="">
    </div>
</div>

<div class="container-date-validation" style="display:none">
    <p class="older-date" style="display:none">Invalid date. Only dates after
        <span id="min-allowed-date"></span> are allowed.
    </p>
    <p class="future-date" style="display:none">Invalid date. It doesn't allow dates in the future.</p>
    <p class="valid-date">This is a valid date</p>
</div>

Answer 2

I really like using Moment.js for things like this. It uses much more human-readable code, like so:

const moment = require('moment'); // assumes you install Moment as a node module

const month = $('#input_month');
const day = $('#input_day');
const year = $('#input_year');
const hour = $('#input_hour');
const minute = $('#input_minute');

const checkDate = () => {
    const inputDate = moment(month.val() + '/' + day.val() + '/' + year.val() + ' ' + hour.val() + ':' +  minute.val(), "MM-DD-YYYY HH:mm");
    const expDate = moment.subtract(2, "months").subtract(60, "hours");

    if (moment(inputDate).isBefore(expDate, "minute") {
        // do something
    }
}

month.on('change', checkDate);

You'll also need to ensure you're getting usable values from your inputs. I suggest using number input types or select menus to restrict input options.

Answer 3

If you go with milliseconds :

2 months is 5184000000

60 hours is 216000000

total : 5400000000

the wantedDate will be new Date(year, month, day)

var wantedDate = new Date(year,month,day); // will create a date from the inputs
wantedDate.getTime() // will convert to miliseconds

and if you convert the wanted date to milliseconds you can easily find out

wantedDate < Date.now() && wantedDate > (Date.now() - 5400000000)