日付の比較 - 終了日は開始日より大きくする必要があります。

Question

開始日よりも常に終了日を実装するロジックは考えられません。ここに私のビューコードがあり、Event EndとEvent Startという2つのフィールドがあります。 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

あなたが実際に入力フィールドのIDを参照しようとされていない場合は、ケースあなたが定義した2つの変数。スクリプトは定義されていない2つの変数を読み込みしようとするため、エラーが発生します。私はあなたが日付の無効な形式を使用していることがわかり、あなたのコードを再読み込みした後、修正

<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を使用しています。