比较日期 - 结束日期应该大于开始日期

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。