JavaScript 从表单验证 datetime-local

Question

我有一个允许出租车预订的 html 表单，但它不应该允许及时预订！所以时间必须是当前或未来。

这是表格，我使用 datetime-local。

/* Here is the JavaScript validation for the datetime-local. */

var dateTime = document.getElementById("dateTime").value;

if (dateTime == "" || dateTime == null) {
    booking.dateTime.focus();
    document.getElementById("dateMessage").innerHTML = "Please select a date AND time, thankyou.";
    return valid = false;
} else {
    document.getElementById("destinationMessage").innerHTML = "";
}

```
<form id="booking" action="">
    <div id="firstNameMessage" class="red"></div>
    <span class="red">*</span>First Name:
    <input type="text" name="firstName" id="firstName">
    <br>
    <div id="lastNameMessage" class="red"></div>
    <span class="red">*</span>Last Name:
    <input type="text" name="lastName" id="lastName">
    <br>
    <div id="numberMessage" class="red"></div>
    <span class="red">*</span>Contact Number:
    <input type="text" name="number" id="number">
    <br>

    <div id="unitMessage" class="red"></div>
    Unit Number(optional):
    <input type="text" name="unit" id="unit">
    <br>

    <div id="streetNumberMessage" class="red"></div>
    <span class="red">*</span>Street Number:
    <input type="text" name="streetNumber" id="streetNumber">
    <br>

    <div id="streetNameMessage" class="red"></div>
    <span class="red">*</span>Street Name:
    <input type="text" name="streetName" id="streetName">
    <br>

    <div id="pickupMessage" class="red"></div>
    <span class="red">*</span>Suburb:
    <input type="text" name="pickupSuburb" id="pickupSuburb">
    <br>

    <div id="destinationMessage" class="red"></div>
    Destination Suburb<span class="red">*</span>:
    <input type="text" name="destinationSuburb" id="destinationSuburb">
    <br>
    <div id="dateMessage" class="red"></div>
    Pick-Up Date and Time<span class="red">*</span>:
    <input type="datetime-local" name="dateTime" id="dateTime">
    <br>

    <br>
    <input type="button" value="Submit"
        onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)" />
    <input type="reset" value="Reset">

</form>

我怎样才能让它检查是当前时间还是将来？（基本上禁用过去的条目）。

Answer 1

请使用input type = "date"而不是日期时间。浏览器可能不再支持。

请参考这个链接

现在要设置min日期，您可以使用以下代码段

//Get today's date and split it by "T"
var today = new Date().toISOString().split('T')[0];
document.getElementById("dateTime").setAttribute('min', today);

DEMO