最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

JavaScript validating datetime-local from form - Stack Overflow

programmeradmin4浏览0评论

I have an html form which allows for a taxi booking, but it shouldn't allow bookings back in time! so the time must be current or in the future.

Here is the form, I use 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>

I have an html form which allows for a taxi booking, but it shouldn't allow bookings back in time! so the time must be current or in the future.

Here is the form, I use 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>

How can I make it check for being the current time or in the future? (Basically disabling past entries).

Share Improve this question edited Jun 7, 2020 at 9:28 Ericgit 7,1033 gold badges49 silver badges59 bronze badges asked Jun 12, 2016 at 3:34 JcodeJcode 2033 silver badges12 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 5

Please use input type = "date" instead of date-time. Probably no more supported by browsers.

Please refer this link

Now to set min date you cn use the following snippet

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

DEMO

You can just pare dates by > and <. Make sure the dates in the same timezone though.

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

You should use a jquery or bootstrap calendar. It is ideal for this situation. It is also very easy for the user to pick up the date this way.

You have all configuration options in such calendars for e.g. assigning culture, date format, mindate, maxdate etc.

Also keep in mind to pick the date from server and set it as mindate in javascript since the datetime might be wrong on client puter.

发布评论

评论列表(0)

  1. 暂无评论