javascript - 如果日期和时间早于某个值，则发出警报消息

Question

我有一个带有日期和时间字段的表单，日期字段由 3 个字段组成:日、月 和年。时间字段由 2 个字段组成，小时 和分钟。

如果日期早于 2 个月零 60 小时，我想显示警报。

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>

我只能用一个日期字段来完成，但现在我需要 3 个字段。

我试过这样的:

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

我建议你解析表单日期，根据预期的时间创建比较日期，如果表单日期大于比较日期则返回。

请让我知道下面的代码是否符合您的预期:

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>