부트 스트랩 datetimepicker가 별도로 열리지 않습니다.

Question

첫 번째 날짜 입력을 선택하면 두 번째 날짜 입력이 첫 번째 날짜와 동일한 위치에 캘린더를 엽니 다. 하나의 캘린더에서 두 날짜가 모두 선택된 것 같습니다. 해당 캘린더에 액세스하는 방법은 별도로 입력 한 날짜별로 열리십니까?

현재 :

내가 원하는 것은 :

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