ブートストラップdatetimepickerが別途開かない

Question

最初の日付入力を選択して選択すると、2番目の日付入力は最初の日付入力と同じ位置にカレンダーを開きます。両方の日付が1つのカレンダーから選択されているようです。そのカレンダーにアクセスするには、別々に日付を入力するごとに開きますか？

電流：

私が欲しい：

HTML：

<form id="filter"> 
    <table class="vms"> 
    <tr> 
     <td><input class="form-control" id="datetimepicker1"></td> 
     <td><input class="form-control" id="datetimepicker2"></td> 
    </tr> 
    </table> 
</form> 

のjQuery：

私が使用している

$('#datetimepicker1').datetimepicker({ format:'YYYY-MM-DD HH:mm', maxDate: $.now(), stepping: 5}) 
$('#datetimepicker2').datetimepicker({ format:'YYYY-MM-DD HH:mm', maxDate: $.now(), stepping: 5}) 

のDateTimePicker： https://eonasdan.github.io/bootstrap-datetimepicker/

Answer 1

にリンクされたピッカーによってinsiredさ

<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 

は、実施例もありますあなたに役立つかもしれない

$(function() { 
 
     $('#datetimepicker6').datetimepicker(); 
 
     $('#datetimepicker7').datetimepicker({ 
 
      useCurrent: false //Important! See issue #1075 
 
     }); 
 
     $("#datetimepicker6").on("dp.change", function (e) { 
 
      $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
 
     }); 
 
     $("#datetimepicker7").on("dp.change", function (e) { 
 
      $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
 
<div class="container"> 
 
    <div class='col-md-5'> 
 
     <div class="form-group"> 
 
      <div class='input-group date' id='datetimepicker6'> 
 
       <input type='text' class="form-control" /> 
 
       <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class='col-md-5'> 
 
     <div class="form-group"> 
 
      <div class='input-group date' id='datetimepicker7'> 
 
       <input type='text' class="form-control" /> 
 
       <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

このような何かやってみてください。これは、ここでdoc