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

我建议您解析表单日期，根据预期的时间段创建比较日期，然后在formDate大于comparisonDate时返回。

如果以下代码符合您的预期，请告诉我们：

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

如果你用毫秒：

2个月是5184000000

60小时是216000000

总计：5400000000

wantDate将是新日期（年，月，日）

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

如果您将想要的日期转换为毫秒，您可以轻松找到

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

Answer 3

我真的很喜欢使用Moment.js来做这样的事情。它使用了更加人性化的代码，如下所示：

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);

您还需要确保从输入中获取可用值。我建议使用数字输入类型或select菜单来限制输入选项。

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

3 个答案: