Question

我使用了this datepicker，它工作正常，但我找不到如何在没有pop的<div>中显示此datepicker的内容。

我的代码：

<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所说：

在一个简单的div上实例化datepicker将提供一个始终可见的嵌入式选择器。

这是一份工作样本：

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列表器添加到错误的位置，在datepicker初始化之后将其放置。此外，changeDate事件具有date属性，该属性包含表示所选日期的Date对象。

从弹出窗口到内联创建引导日期选择器

1 个答案: