JavaScript validate datetime-local von Formular

Question

Ich habe ein HTML-Formular, das eine Taxi-Buchung ermöglicht, aber es sollte keine Buchungen in der Zeit zurück zulassen! Die Zeit muss also aktuell oder in der Zukunft sein.

Hier ist das Formular, ich verwende 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> 

Hier ist die JavaScript-Validierung für das 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 = ""; 
    } 

Wie kann ich überprüfen, ob die aktuelle Uhrzeit oder in der Zukunft ist? (Im Grunde deaktiviert frühere Einträge).

Answer 1

Bitte verwenden Sie input type = "date" statt Datum-Uhrzeit. Wahrscheinlich nicht mehr von Browsern unterstützt.

Please refer this link

Jetzt min Datum einzustellen Sie verwenden cn folgenden Ausschnitt

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

Sie sollten einen Jquery- oder Bootstrap-Kalender verwenden. Es ist ideal für diese Situation. Es ist auch sehr einfach für den Benutzer, das Datum auf diese Weise abzurufen.

Sie haben alle Konfigurationsoptionen in solchen Kalendern für z.B. Zuweisen von Kultur, Datumsformat, Denkweise, Maxdate etc.

Denken Sie auch daran, das Datum vom Server auszuwählen und es als Einstellung in Javascript festzulegen, da die Datetime auf dem Clientcomputer möglicherweise falsch ist.

Answer 3

Sie können nur Daten vergleichen > und <. Stellen Sie sicher, dass die Daten in derselben Zeitzone liegen.

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