制作一个 bootstrap 从弹出到内联的日期选择器

Question

我使用了 this 日期选择器，它工作正常，但我找不到如何在没有弹出窗口的 <div> 中显示此日期选择器的内容。

我的代码：

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
  <input class="form-control" type="text" readonly />
  <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

<script type="text/javascript">
  jQuery(function () {
    jQuery("#datepicker").datepicker({
      startDate: new Date(),
      minDate: 0,
      language: "fr",
      autoOpen: true,
      autoclose: true,
      todayHighlight: true 
    }).datepicker('update', new Date());
  });
</script>

编辑：

我无法从输入中获取起息日

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"></div>
<input type="hidden" id="my_hidden_input" class="form-control">

<script type="text/javascript">
  jQuery('#datepicker').datepicker();
  jQuery('#datepicker').on('changeDate', function() {
    jQuery('#my_hidden_input').val( jQuery('#datepicker').datepicker('getFormattedDate'));
  });

  jQuery(document).ready(function () {
    jQuery("#datepicker").datepicker({
      startDate: new Date(),
      language: "fr",
      autoOpen: true,
      autoclose: true,
      todayHighlight: true
      //datesDisabled: ['22/02/2017', '28/02/2017']
    }).datepicker('update', new Date());;
  });

  jQuery("input[type=hidden]").bind('change', function() {
    alert(jQuery(this).val());
  });
 </script>

Answer 1

正如 docs 所说：

Instantiating the datepicker on a simple div will give an embedded picker that is always visible.

这是一个工作示例：

jQuery(function () {
  jQuery("#datepicker").datepicker({
    startDate: new Date(),
    minDate: 0,
    language: "fr",
    autoOpen:true,
    autoclose: true,
    todayHighlight: true 
  }).datepicker('update', new Date());
  
  jQuery('#datepicker').on('changeDate', function(e) {
    jQuery('#my_hidden_input').val(e.date);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.fr.min.js"></script>

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
</div>
<input type="hidden" id="my_hidden_input" class="form-control">

编辑：

您要添加 changeDate listner in the wrong place, put it after datepicker initialization. Moreover changeDate 事件有 date 属性包含代表所选日期的日期对象。

制作一个 bootstrap 从弹出到内联的日期选择器

Make a bootstrap datepicker from a pop-up to inline

bootstrap-modal

bootstrap-datepicker