JavaScript, подтверждающий дату-местность от формы

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> 

Вот валидация JavaScript для 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 = ""; 
    } 

Как я могу проверить его на наличие текущего времени или в будущем? (В основном отключить предыдущие записи).

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. Это идеальное решение для этой ситуации. Это также очень легко для пользователя, чтобы подобрать дату таким образом.

У вас есть все варианты конфигурации в таких календарях, например. присвоение культуры, формат даты, mindate, maxdate и т. д.

Также имейте в виду, чтобы выбрать дату с сервера и установить ее как символ в javascript, так как 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