javascript - 如何使 datepicker-bootstrap 输入范围内联？

Question

尝试内联显示两个日历，并且在单击输入时不会弹出。 Using bootstrap slider

$('.input-daterange input').each(function() {
  $(this).datepicker({
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years",
    updateViewDate: false
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

 <div class="input-group input-daterange">
   <input type="text" class="form-control" value="2012-04-05">
   <div class="input-group-addon">to</div>
   <input type="text" class="form-control" value="2012-04-19">
</div>

这就是我将内联与单个日历一起使用的方式，但我无法设法将其用于日期范围和两个日历:

<div id="sandbox-container"><div></div></div>

$('#sandbox-container div').datepicker({
  format: "yyyy",
  viewMode: "years", 
  minViewMode: "years",
  updateViewDate: false
});

我尝试了以下方法，但它放置了三个日历，第一个 div 有 2 个彼此相邻，第二个 div 只有一个日历

$('.input-daterange div').each(function() {
  $(this).datepicker({
    format: "yyyy",
    viewMode: "years", 
    minViewMode: "years",
    updateViewDate: false
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

  <div class="input-group input-daterange">
    <div></div>
    <div></div>
    <input type="hidden" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="hidden" class="form-control" value="2012-04-19">
  </div>

Answer 1

希望这有帮助。某些 CSS 文件丢失。

注意:如果有帮助，see my answer here在单个日期选择器中选择一个范围。

$('.input-daterange input').each(function() {
    $(this).datepicker({
        format: "yyyy",
        viewMode: "years", 
        minViewMode: "years",
        updateViewDate: false
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>