チェック開始日は、（任意のpluguinを使用せずに）終了日より小さい場合

Question

はここで私は二つの日付fromDateとtoDateを持っているが、私は日が小さくfromDate < toDateそれだけかどうかをチェックするかどうかを確認します。たとえば、fromDate: 01/01/2016とtoDate: 15/01/2016をうまく入れても、fromDate: 01/01/2016とtoDate: 15/10/2016を入力してもエラーは発生しません。

ここに私のコードは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

あなたはあなたのケースでは、文字列の比較の代わりに、日付の比較を行っている、日付オブジェクトを取得し、値を比較する必要があります。

datepicker.getDate()メソッドを使用すると、現在選択されている日付オブジェクトを入力フィールドから取得できます。

$(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

あなたはJavascriptでそれと JavaScript Date Library 、あなたの質問に

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?'); 
}