Vergleichen von zwei Daten aus einem Formular

Question

Irgendwie kann ich das nicht zum Laufen bringen. Für mich scheint es korrekt zu sein und wenn ich den Code debugge, werden meine Werte korrekt übergeben. Doch noch ist der Code nicht die "alert" Dialogfeld an allen Terminen

<input id="date1" type="text" class="form-control" 
     placeholder="date 1" data-date-format="dd/mm/yyyy"> 

<input id="date2" type="text" class="form-control" 
     placeholder="date 2" data-date-format="dd/mm/yyyy" 
     onchange="checkDate()"> 

function checkDate() { 
    var d1 = document.getElementById("date1").value; 
    var d2 = document.getElementById("date2").value; 
    if (d2 >= d1) { 
     alert("date 2 is not allowed to be smaller than date 1") 
    } else { 
     //Success 
    } 
} 

Answer 1

Zuerst dies tun:

function myStringToDate(str) { 
    var arr = str.split("/"); // split string at slashes to make an array 
    var yyyy = arr[2] - 0; // subtraction converts a string to a number 
    var jsmm = arr[1] - 1; // subtract 1 because stupid JavaScript month numbering 
    var dd = arr[0] - 0; // subtraction converts a string to a number 
    return new Date(yyyy, jsmm, dd); // this gets you your date 
} 

Dann haben Sie das Werkzeug, das Sie dafür arbeiten müssen:

function checkDate() { 
    var d1 = myStringToDate(document.getElementById("date1").value); 
    var d2 = myStringToDate(document.getElementById("date2").value); 
    if (d2.getTime() <= d1.getTime()) { 
     alert("date 2 is not allowed to be smaller than date 1") 
    } else { 
     //Success 
    } 
} 

Beachten Sie, dass ich das geändert Vergleichsoperator von >= bis <=, weil es so aussah, als ob <= Ihrer Absicht besser entsprach. Wenn ich falsch lag, ändere es einfach zurück.

Answer 2

Verwenden Date Klasse eingeben vergleichen:

function checkDate() { 
 
    var d1 = new Date(document.getElementById("date1").value); 
 
    var d2 = new Date(document.getElementById("date2").value); 
 

 
    if (d2.getTime() >= d1.getTime()) { 
 
    alert("date 2 is not allowed to be smaller than date 1") 
 
    } else { 
 
    alert('//Success'); 
 
    } 
 
}

<input id="date1" type="text" class="form-control" placeholder="date 1" data-date-format="dd/mm/yyyy"> 
 

 
<input id="date2" type="text" class="form-control" onchange="checkDate()" placeholder="date 2" data-date-format="dd/mm/yyyy">

Answer 3

Sie vergleichen Strings .

versuchen, den Eingang zu einem date Objekt konvertieren wie unten:

d1 = new Date(document.getElementById("date1").value); 

auch gibt es einen neuen Eingabetyp in html5: „date“
ich empfehle, dass für Ihren Eingabe-Tag.

Beispiel:

<input type="date" id="date1" date-format="dd/mm/yyyy" onchange="checkDate()"/> 

Answer 4

Hier ist ein gutes Beispiel des HTML5 Datumsfeld. Ich habe auch Ihre Variablen in Start- und Enddatum umbenannt, damit Sie leichter folgen können.

function checkDate() { 
 
    var dateForm = document.forms['date-form']; 
 
    var startDate = new Date(dateForm['start-date'].value); 
 
    var endDate = new Date(dateForm['end-date'].value); 
 

 
    if (startDate >= endDate) { 
 
    alert("End Date cannot occur before the Start Date!"); 
 
    } else { 
 
    alert("Success!"); 
 
    } 
 
}

.form-field { 
 
    display: block; 
 
    font-weight: bold; 
 
} 
 
.form-field label { 
 
    display: inline-block; 
 
    width: 5em; 
 
} 
 
.form-field label:after { 
 
    content: ': '; 
 
}

<form name="date-form"> 
 
    <div class="form-field"> 
 
    <label>Start Date</label> 
 
    <input id="date1" type="date" class="form-control" name="start-date" 
 
      format="dd/mm/yyyy" data-date-format="dd/mm/yyyy" /> 
 
    </div> 
 
    <div class="form-field"> 
 
    <label>End Date</label> 
 
    <input id="date2" type="date" class="form-control" name="end-date" 
 
      format="dd/mm/yyyy" data-date-format="dd/mm/yyyy" /> 
 
      <!-- onchange="checkDate()" --> 
 
    </div> 
 
    <input type="button" value="Check" onClick="checkDate()" /> 
 
</form>