比較日期 - 結束日期應該大於開始日期

Question

我無法想象一個邏輯來實現始終大於開始日期的結束日期。這是我的視圖代碼，並有兩個字段事件結束和事件開始。嘗試執行，如Validate that end date is greater than start date with jQuery所示，但失敗。如何實現這一點？

<div class="clearfix"></div> 
 
<div class="control-group form-group"> 
 

 
    <label class="control-label col-md-4" style="text-align:left">Event Start</label> 
 
    <div class="controls" style="margin-left:0px"> 
 

 
    <div class="col-md-3 date" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years"> 
 
     <input class="m-wrap col-md-11 m-ctrl-medium datepicker form-control" required="required" name="starttimedate" id="ed_starttimedate" type="text" value="<?php echo $_POST['starttime']?date('d-m-Y',$_POST['starttime']):date('d-m-Y'); ?> " /> 
 
     <!-- <span class="add-on"><i class="fa fa-calendar" style="margin-top:5px"></i></span> --> 
 
    </div> 
 
    <div class="col-md-1">&nbsp;</div> 
 
    <div class="col-md-3 bootstrap-timepicker-component"> 
 
     <input class="m-wrap col-md-11 m-ctrl-medium timepicker-default form-control" required="required" value="<?php echo date('h:i A',$_POST['starttime']);?>" name="starttimetime" id="ed_starttimetime" type="text" /> 
 
     <!-- <span class="add-on"><i class="fa fa-clock-o" style="margin-top:5px"></i></span>--> 
 
    </div> 
 

 
    <div class="clearfix"></div> 
 

 
    </div> 
 

 
</div> 
 
<div class="clearfix"></div> 
 
<div class="control-group form-group"> 
 
    <label class="control-label col-md-4" style="text-align:left">Event End</label> 
 
    <div class="controls "> 
 
    <div class="col-md-3 date" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years"> 
 
     <input class="m-wrap col-md-11 m-ctrl-medium datepicker form-control" required="required" name="endtimedate" id="ed_endtimedate" type="text" value="<?php echo $_POST['endtime']?date('d-m-Y',$_POST['endtime']):date('d-m-Y'); ?> " /> 
 
     <!--<span class="add-on"><i class="fa fa-calendar" style="margin-top:5px"></i></span>--> 
 
    </div> 
 
    <div class="col-md-1">&nbsp;</div> 
 
    <div class="col-md-3 bootstrap-timepicker-component"> 
 
     <input class="m-wrap col-md-11 m-ctrl-medium timepicker-default form-control" required="required" value="<?php echo date('h:i A',$_POST['endtime']);?>" name="endtimedatetime" id="ed_endtimedatetime" type="text" /> 
 
     <!-- <span class="add-on"><i class="fa fa-clock-o" style="margin-top:5px"></i></span>--> 
 
    </div> 
 
    </div>

腳本是：

<script> 
 
    $("#ed_endtimedate").change(function() { 
 
    var startDate = document.getElementById("ed_starttimedate").value; 
 
    var endDate = document.getElementById("ed_endtimedate").value; 
 

 
    if ((Date.parse(ed_endtimedate) <= Date.parse(ed_starttimedate))) { 
 
     alert("End date should be greater than Start date"); 
 
     document.getElementById("ed_endtimedate").value = ""; 
 
    } 
 
    }); 
 
</script>

Answer 1

在你的if-情況下，你實際上是試圖引用輸入字段，而不是的ID的你定義了兩個變量。會發生錯誤，因爲腳本會嘗試讀取兩個未定義的變量。請參閱下面的修復

<script> 
 
    $("#ed_endtimedate").change(function() { 
 
    var startDate = document.getElementById("ed_starttimedate").value; 
 
    var endDate = document.getElementById("ed_endtimedate").value; 
 

 
    if ((Date.parse(endDate) <= Date.parse(startDate))) { 
 
     alert("End date should be greater than Start date"); 
 
     document.getElementById("ed_endtimedate").value = ""; 
 
    } 
 
    }); 
 
</script>

重新閱讀你的代碼後，我看到你使用的格式無效的日期。日期格式的ISO標準是yyyy-mm-dd，但您使用的是dd-mm-yyyy。