Überprüfen Sie, ob Startdatum ist weniger als Enddatum (ohne jede pluguin zu verwenden)

Question

Hier habe ich zwei Termine fromDate und toDate, möchte ich überprüfen, ob die fromDate < toDate aber nur überprüft, ob der Tag kleiner. Zum Beispiel, wenn Sie setzen fromDate: 01/01/2016 und toDate: 15/01/2016 funktioniert gut, aber wenn ich setzen fromDate: 01/01/2016 und toDate: 15/10/2016 es wird kein Fehler erhalten.

Hier ist mein Code in jsFiddle.

$(function() { 
 
    $(".date-picker").datepicker({ 
 
    dateFormat: 'dd/mm/yy' 
 
    }); 
 

 
    $(".date-picker").each(function() { 
 
    $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>'); 
 
    }); 
 

 
    $('input:button').click(function(e) { 
 
    $("#fDate").removeClass("red"); 
 
    $("#tDate").removeClass("red"); 
 
    var fromDate = $("#fDate").val(); 
 
    var toDate = $("#tDate").val(); 
 

 
    if (toDate <= fromDate) { //here only checks the day not month and year 
 
     $("#fDate").addClass("red"); 
 
     $("#tDate").addClass("red"); 
 
     errors++; 
 
    } 
 

 
    if (errors) e.preventDefault(); 
 
    }); 
 
});

.imageInputWrapper { 
 
    width: 172px; 
 
    border: solid 1px white; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    box-shadow: 0 2px 2px 0 #C2C2C2; 
 
} 
 
.red { 
 
    box-shadow: 0px 0px 2px 2px red; 
 
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
 
<form> 
 
    <table> 
 

 
    <tr> 
 
     <td> 
 
     <input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" /> 
 
     <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input id="tDate" class="date-picker" type="text" name="toDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" /> 
 
     <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="toDateImgId"> 
 
     </td> 
 

 

 
    </tr> 
 
    <input type="button" value="submit"> 
 
    </table> 
 
</form>

Answer 1

Sie müssen die Daten Objekte erhalten und dann die Werte vergleichen zu können, in Ihrem Fall tun Sie String-Vergleich statt Datumsvergleich.

Mit der Methode datepicker.getDate() können Sie das aktuell ausgewählte Datumsobjekt aus dem Eingabefeld holen.

$(function() { 
 
    $(".date-picker").datepicker({ 
 
    dateFormat: 'dd/mm/yy' 
 
    }); 
 

 
    $(".date-picker").each(function() { 
 
    $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>'); 
 
    }); 
 

 
    $('input:button').click(function(e) { 
 
    $("#fDate").removeClass("red"); 
 
    $("#tDate").removeClass("red"); 
 
    var fromDate = $("#fDate").datepicker('getDate'); 
 
    var toDate = $("#tDate").datepicker('getDate'); 
 

 
    if (toDate <= fromDate) { //here only checks the day not month and year 
 
     $("#fDate").addClass("red"); 
 
     $("#tDate").addClass("red"); 
 
     errors++; 
 
    } 
 

 
    if (errors) e.preventDefault(); 
 
    }); 
 
});

.imageInputWrapper { 
 
    width: 172px; 
 
    border: solid 1px white; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    box-shadow: 0 2px 2px 0 #C2C2C2; 
 
} 
 
.red { 
 
    box-shadow: 0px 0px 2px 2px red; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 

 

 
<form> 
 
    <table> 
 

 
    <tr> 
 
     <td> 
 
     <input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" /> 
 
     <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input id="tDate" class="date-picker" type="text" name="toDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" /> 
 
     <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="toDateImgId"> 
 
     </td> 
 

 

 
    </tr> 
 
    <input type="button" value="submit"> 
 
    </table> 
 
</form>

Answer 2

Sie könnten das Date-Objekt in Javascript überprüfen JavaScript Date Library Damit Sie so etwas wie

var fromDate = '04/14/2016', 
    toDate = '04/16/2016', 
    fdate = new Date(fromDate), 
    tdate = new Date(toDate); 

if (fdate.valueOf() > tdate.valueOf()) { 
    console.log('Departure can not be before arrival silly. What are you a time traveler?'); 
}