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

【问题标题】：How to make datepicker-bootstrap input range inline?如何使 datepicker-bootstrap 输入范围内联？
【发布时间】：2018-06-29 22:29:35
【问题描述】：

尝试将两个日历彼此相邻显示，并且在单击输入时不弹出。 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>

【问题讨论】：

你的脚本在哪里？？？
所以你的日期选择器正在工作，但你想把它放在右侧。我说的对吗？
@Rumesh 通过我的尝试更新了问题
在代码 sn-p 上，您的日期选择器正在工作，那么您的要求是什么？
@Rumesh 现在检查问题，看到第二个截图，你能看到我们有三个日历吗？为什么？我们应该只看到两个，一个并排

标签： javascript jquery

【解决方案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>

【讨论】：

其实在初始化picker的时候需要在options中设置multidate:true。选择日期后，如果您获得值，它将返回一个选定日期的数组。但是您可以选择无限数量的日期。我在 onChange 事件中限制为 2 个日期（这意味着数组具有日期范围）。所以该数组最多包含 2 个元素。如果它有 1，则只选择 1 个日期。因此它不会是一个范围。
我们如何才能在您的其他答案中仅输入年份？
要在输入中显示日期，请使用选项。要获取指定格式的日期，请在 getFormattedDate 方法中指定格式，如下所述。
这是我格式化它的方式，但它仍然显示整个日期而不是年份pastebin.com/T1n5tFw3
答案怎么了？

【解决方案2】：

这就是我最终解决它的方式：

$('#sandbox-container').datepicker({ 
  format: "yyyy", 
  startView: 1, 
  viewMode: "years", 
  minViewMode: "years", 
  minViewMode: "years", 
  multidate: true, 
  multidateSeparator: ", ", 
  autoClose: true, 
}).on("changeDate",function(event){ 
  var dates = event.dates, elem = $('#sandbox-container'); 
  if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser. 
  if(dates.length>2) dates=dates.splice(dates.length-1); 
  dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()}); 
  elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates); 
});

<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 id="sandbox-container">
      <input name="usp-custom-14" id="usp-custom-14" type="text">
    </div>

【讨论】：