首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >JavaScript从表单中验证日期时间-本地

JavaScript从表单中验证日期时间-本地
EN

Stack Overflow用户
提问于 2016-06-12 03:34:01
回答 2查看 6.5K关注 0票数 4

我有一个html表单,它允许一个出租车预订,但它不应该允许预订回到时间!所以时间必须是当前的或者是将来的。

这是表格,我用的是日期时间-本地的。

代码语言:javascript
运行
复制
/* 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 = "";
}
代码语言:javascript
运行
复制
代码语言:javascript
运行
复制
<div id="firstNameMessage" class="red"></div>
代码语言:javascript
运行
复制
<span class="red">*</span>First Name:
代码语言:javascript
运行
复制
<input type="text" name="firstName" id="firstName">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="lastNameMessage" class="red"></div>
代码语言:javascript
运行
复制
<span class="red">*</span>Last Name:
代码语言:javascript
运行
复制
<input type="text" name="lastName" id="lastName">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="numberMessage" class="red"></div>
代码语言:javascript
运行
复制
<span class="red">*</span>Contact Number:
代码语言:javascript
运行
复制
<input type="text" name="number" id="number">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="unitMessage" class="red"></div>
代码语言:javascript
运行
复制
Unit Number(optional):
代码语言:javascript
运行
复制
<input type="text" name="unit" id="unit">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="streetNumberMessage" class="red"></div>
代码语言:javascript
运行
复制
<span class="red">*</span>Street Number:
代码语言:javascript
运行
复制
<input type="text" name="streetNumber" id="streetNumber">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="streetNameMessage" class="red"></div>
代码语言:javascript
运行
复制
<span class="red">*</span>Street Name:
代码语言:javascript
运行
复制
<input type="text" name="streetName" id="streetName">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="pickupMessage" class="red"></div>
代码语言:javascript
运行
复制
<span class="red">*</span>Suburb:
代码语言:javascript
运行
复制
<input type="text" name="pickupSuburb" id="pickupSuburb">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="destinationMessage" class="red"></div>
代码语言:javascript
运行
复制
Destination Suburb<span class="red">*</span>:
代码语言:javascript
运行
复制
<input type="text" name="destinationSuburb" id="destinationSuburb">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<div id="dateMessage" class="red"></div>
代码语言:javascript
运行
复制
Pick-Up Date and Time<span class="red">*</span>:
代码语言:javascript
运行
复制
<input type="datetime-local" name="dateTime" id="dateTime">
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<br>
代码语言:javascript
运行
复制
<input type="button" value="Submit"
代码语言:javascript
运行
复制
    onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)" />
代码语言:javascript
运行
复制
<input type="reset" value="Reset">
代码语言:javascript
运行
复制

我怎样才能检查它是现在的时间还是将来的时间?(基本上禁用过去的条目)。

EN

回答 2

Stack Overflow用户

发布于 2016-06-12 05:13:26

您可以通过><来比较日期。不过,请确保同一时区中的日期。

代码语言:javascript
运行
复制
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

票数 1
EN

Stack Overflow用户

发布于 2016-06-12 04:09:35

您应该使用jquery或引导日历。在这种情况下,它是理想的。用户也很容易以这种方式获取日期。

您在这样的日历中有所有的配置选项,例如分配区域性、日期格式、mindate、maxdate等。

此外,请记住从服务器中选择日期,并在javascript中将其设置为mindate,因为日期时间在客户端计算机上可能出错。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37770486

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档