Question

我有一个html表格，允许出租车预订，但它不应该允许预订回来！所以时间必须是最新的或将来的。

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

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

以下是datetime-local的JavaScript验证。

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 = "";
    }

如何检查当前时间或将来？（基本上禁用过去的条目）。

Answer 1

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

Please refer this link

现在设置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

Answer 2

您应该使用jquery或bootstrap日历。它是这种情况的理想选择。用户也可以通过这种方式轻松获取日期。

您可以在此类日历中使用所有配置选项，例如：分配文化，日期格式，思考，最大化等。

另外请记住从服务器中选择日期并在javascript中将其设置为mindate，因为客户端计算机上的datetime可能是错误的。

Answer 3

您只需按>和<比较日期即可。确保日期在同一时区。

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

var dateTime = convertDateToUTC(new Date(dateTimeStr));
var now = new Date();

if (isNaN(date.getTime()) || date <= now) {
  booking.dateTime.focus();
  document.getElementById("dateMessage").innerHTML = "Please select a date AND time in the future, thankyou.";
  return valid = false;
} else {
  document.getElementById("destinationMessage").innerHTML = "";
}

function convertDateToUTC(date) { 
    return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()); 
}

JS Fiddle

JavaScript从表单验证datetime-local

3 个答案: