JavaScript validating datetime-local from form - Stack Overflow

admin管理员组

文章数量:1321435

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

• javascript
• datetime

Share Improve this question Follow edited Jun 7, 2020 at 9:28 Ericgit 7,10333 gold badges4949 silver badges5959 bronze badges asked Jun 12, 2016 at 3:34 JcodeJcode 20333 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: 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.

本文标签： JavaScript validating datetimelocal from formStack Overflow