select endDate after startDate

endDate (date_end)が常にstartDate (date_start)の後になるという制約を追加するのに助けが必要です。select endDate after startDate

私はdate_startため2016-10-31を選択したのであれば、その後、2016-10-31前の日付がend_date入力に無効になります。ここで

は私のコードです：

<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 

<section class="content"> 
    <div class="box box-primary"> 
    <div class="box-body"> 
     <form class="form-horizontal mt-20" method="post" action="action/input"> 
     <div class="form-group"> 
      <label class="col-sm-3 control-label">Name</label> 
      <div class="col-sm-5"> 
      <select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;"> 
       <option disabled selected>Select name</option> 
       <option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option> 
       <option value='4' data-date_start="2016-10-09" data-date_end="2016-10-29">Boby</option> 
       <option value='5' data-date_start="2016-10-01" data-date_end="2016-10-31">Ciara</option> 
       <option value='6' data-date_start="2016-10-05" data-date_end="2016-10-22">Don</option> 
       <option value='7' data-date_start="2016-10-01" data-date_end="2016-10-17">Ester</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-3 control-label">Start Date</label> 
      <div class="col-sm-5"> 
      <div class="input-group date"> 
       <div class="input-group-addon"> 
       <i class="fa fa-calendar"></i> 
       </div> 
       <input id="start_date" name="start_date" type="text" class="form-control pull-right"> 
      </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-3 control-label">End Date</label> 
      <div class="col-sm-5"> 
      <div class="input-group date"> 
       <div class="input-group-addon"> 
       <i class="fa fa-calendar"></i> 
       </div> 
       <input id="end_date" name="end_date" type="text" class="form-control pull-right"> 
      </div> 
      </div> 
     </div> 
    </div> 

    <div class="box-footer col-md-offset-3"> 
     <button type="submit" class="btn btn-success mr-10">Save</button> 
     <button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button> 
    </div> 

    </form> 
    </div> 
</section>

JS：

$(document).ready(function() { 
    var start = null; 
    var end = null; 
    $('#date').change(function() { 

    start = $(this).find(":selected").data("date_start"); 
    end = $(this).find(":selected").data("date_end"); 
    $('.input-group.date').datepicker("remove"); //clearing the previos options and again initiating datepicker 
    initDatePicker(); 
    }); 

    function initDatePicker() { 
    $('.input-group.date').datepicker({ 
     format: "yyyy-mm-dd", 
     startDate: new Date(start), 
     endDate: new Date(end), 
     autoclose: false 
    }); 
    } 

});

出典

2016-10-14 brobrobrobrobro

あなたがsetter methodで、たstartDateとendDateにピッカーにonchangeのイベントハンドラを追加することができます。以下の例を参照してください。

追加/変更：各日付ピッカー用CHANGEDATEコールバック関数2.Register

<div class="input-group date" id="start_date_group">

- 例えば：

は、id属性を有すること日付グループdivを変更します。

$("#start_date_group").on("changeDate", function(e) { $('#end_date_group').datepicker('setStartDate',e.date); }); $("#end_date_group").on("changeDate", function(e) { $('#start_date_group').datepicker('setEndDate',e.date); });
1. また、あなたのhtmlには位置がない</div>タグがあります。これをendDateグループの後からフォームの終了タグの後ろに移動しました。

$(document).ready(function() { 
 
    var start = null; 
 
    var end = null; 
 
    $('#date').change(function() { 
 

 
    start = $(this).find(":selected").data("date_start"); 
 
    end = $(this).find(":selected").data("date_end"); 
 
    $('.input-group.date').datepicker("remove"); //clearing the previos options and again initiating datepicker 
 
    initDatePicker(); 
 
    }); 
 

 
    function initDatePicker() { 
 
    $('.input-group.date').datepicker({ 
 
     format: "yyyy-mm-dd", 
 
     startDate: new Date(start), 
 
     endDate: new Date(end), 
 
     autoclose: false 
 
    }); 
 
    //when the Start date changes, set the startDate on the End Date field 
 
    $("#start_date_group").on("changeDate", function(e) { 
 
     $('#end_date_group').datepicker('setStartDate',e.date); 
 
    }); 
 
    //when the End date changes, set the endDate on the Start Date field 
 
    $("#end_date_group").on("changeDate", function(e) { 
 
     $('#start_date_group').datepicker('setEndDate',e.date); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" /> 
 
<link rel="stylesheet" type="text/css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" /> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
 
<section class="content"> 
 
    <div class="box box-primary"> 
 
    <div class="box-body"> 
 
     <form class="form-horizontal mt-20" method="post" action="action/input"> 
 
     <div class="form-group"> 
 
      <label class="col-sm-3 control-label">Name</label> 
 
      <div class="col-sm-5"> 
 
      <select name="date" class="form-control select2" id="date" data-placeholder="" style="width: 100%;"> 
 
       <option disabled selected>Select name</option> 
 
       <option value='2' data-date_start="2016-10-04" data-date_end="2016-10-14">Anton</option> 
 
       <option value='4' data-date_start="2016-10-09" data-date_end="2016-10-29">Boby</option> 
 
       <option value='5' data-date_start="2016-10-01" data-date_end="2016-10-31">Ciara</option> 
 
       <option value='6' data-date_start="2016-10-05" data-date_end="2016-10-22">Don</option> 
 
       <option value='7' data-date_start="2016-10-01" data-date_end="2016-10-17">Ester</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label class="col-sm-3 control-label">Start Date</label> 
 
      <div class="col-sm-5"> 
 
      <!-- add id attribute to the group here --> 
 
      <div class="input-group date" id="start_date_group"> 
 
       <div class="input-group-addon"> 
 
       <i class="fa fa-calendar"></i> 
 
       </div> 
 
       <input id="start_date" name="start_date" type="text" class="form-control pull-right"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label class="col-sm-3 control-label">End Date</label> 
 
      <div class="col-sm-5">     
 
      <!-- add id attribute to the group here --> 
 
      <div class="input-group date" id="end_date_group"> 
 
       <div class="input-group-addon"> 
 
       <i class="fa fa-calendar"></i> 
 
       </div> 
 
       <input id="end_date" name="end_date" type="text" class="form-control pull-right"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    <!--</div> move this closing tag down after the closing form tag --> 
 
     <div class="box-footer col-md-offset-3"> 
 
      <button type="submit" class="btn btn-success mr-10">Save</button> 
 
      <button type="button" class="btn btn-primary" onclick="history.go(-1)">Cancel</button> 
 
     </div> 
 

 
     </form> 
 
    </div> 
 
    </div> <!-- <-- move this closing div tag down here instead of after the endDategroup <div>--> 
 
</section>

出典

2016-10-14 05:05:38

私はあなたのコードを実行しますが、それは、私は、ブートストラップUIの最新バージョンを使用しようとしていたが、私は私の答えを更新しました申し訳ありません – brobrobrobrobro

@brobrobrobrobroが動作していません使用しているブートストラップの日付ピッカーと同じバージョンを使用してください。 –

答えて

関連する問題