開始日と終了日の条件付きのJQueryリンクされたdatepickers

Question

私は2つの日付ピッカーを持っています。そのうちの1つは開始日のためのもので、もう1つは終了日のものです。私の問題は、開始日入力を選択すると、終了日入力がこの日付の後になるようにして、他の日付をロックする必要があることです。終了日入力を選択した場合、開始日入力は終了日の後でなければなりません。 htmlコード

<div class="row"> 
    <div class="col-sm-5"> 
     <div class="form-group"> 
      <label class="control-label col-sm-5" for="date_added">Date 
       Courrier</label> 
      <div class="input-group date"> 
       <span class="input-group-addon"><i 
        class="fa fa-calendar"></i></span><input id="date_added" 
        type="text" class="form-control" value="03/04/2014"> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-5"> 
     <div class="form-group"> 
      <label class="control-label col-sm-7" for="date_modified">Date 
       Arrivée</label> 
      <div class="input-group date"> 
       <span class="input-group-addon"><i 
        class="fa fa-calendar"></i></span><input id="date_modified" 
        type="text" class="form-control" value="03/06/2014"> 
      </div> 
     </div> 
    </div>  
</div> 

javascriptのコード

<script> 
    $(document).ready(function() {  
     $('#date_added').datepicker({ 
      todayBtn : "linked", 
      keyboardNavigation : false, 
      forceParse : false, 
      calendarWeeks : true, 
      autoclose : true 
     });  
     $('#date_modified').datepicker({ 
      todayBtn : "linked", 
      keyboardNavigation : false, 
      forceParse : false, 
      calendarWeeks : true, 
      autoclose : true 
     });  
    }); 
</script> 

だから私は

が

Answer 1

チェックアウトこの例を追加すべきか

<div class='input-group date' id='time_from' style="width:500px"> 
<input type='text' class="form-control" /> 
<span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
</span> 
</div> 
<div class='input-group date' id='time_to' style="width:500px"> 
<input type='text' class="form-control" /> 
<span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
</span> 
</div> 


$('#time_from').datetimepicker({ 
viewMode: 'days', 
minDate: new Date(), //Current 
format: 'DD. MMMM YYYY - HH:mm', 
}); 

$('#time_to').datetimepicker({ 
viewMode: 'days', 
maxDate: new Date().setDate(new Date().getDate() + 90), 
useCurrent: false, 
format: 'DD. MMMM YYYY - HH:mm' 
}); 

$('#time_from').on('dp.change', function (e) { 
$('#time_to').data('DateTimePicker').minDate(e.date); 

//Use moment.js here 
var m = moment(new Date(e.date)); 
m.add(90, 'days'); 
$('#time_to').data('DateTimePicker').maxDate(m); 
}); 

チェックアウトこのfiddle

Answer 2

<script> 
$(document).ready(function() { 
    var start_date=$('#date_added').val(); 
    var end_date=$('#date_modified').val(); 
    $('#date_added').datepicker({ 
     onSelect: function(dateText, inst) { 
      start_date=$(this).val(); 
      $('#date_modified').datepicker('option', 'minDate', new Date(start_date)); 

     }, 
     todayBtn : "linked", 
     keyboardNavigation : false, 
     forceParse : false, 
     calendarWeeks : true, 
     autoclose : true 
    }); 

    $('#date_modified').datepicker({ 
     onSelect: function(dateText, inst) { 
      end_date=$(this).val(); 
      $('#date_added').datepicker('option', 'minDate', new Date(end_date)); 

     }, 
     todayBtn : "linked", 
     keyboardNavigation : false, 
     forceParse : false, 
     calendarWeeks : true, 
     autoclose : true 
    }); 

});