javascript - Bootstrap 日期选择器不关闭

Question

我读到这个错误已修复，但似乎并没有修复。当我在我的网站上创建新员工时，会出现一个 boostrap 模式。我正在使用以下内容为新员工的出生日期创建一个日期选择器。

<div class="input-group date insertInfo" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
 </div>

然后在加载我的 js 脚本后(首先加载 bootstrap，然后加载 bootstrap-datepicker.js)我使用:

<script type="text/javascript">
    $(function () {
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy'
        });
    });
</script>

不幸的是，我可以在日期选择器显示的下拉日历上选择日期，但一旦选择，我就无法再将其关闭。你能帮我解决这个问题吗？提前致谢

Answer 1

您必须执行以下操作:

1. 更正您的类(class)引用
2. 启用自动关闭
3. 覆盖按钮

当您设置日期选择器时，您引用的是一个不存在的类(“.datepicker”)。除此之外，您需要包含“自动关闭”字段并自定义按钮的行为以使其既可以打开也可以关闭日历。

HTML

<div class="input-group date insertInfo" data-provide="datepicker">
  <input type="text" class="form-control">
  <div class="input-group-addon close-button">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

JS

// Setup datepicker

$('.date').datepicker({
  format: 'mm-dd-yyyy',
  autoclose: true
});

// Unbind default events

$('.close-button').unbind();

// Specify new behaviour

$('.close-button').click(function() {
  if ($('.datepicker').is(":visible")) {
    $('.date').datepicker('hide');
  } else {
    $('.date').datepicker('show');
  }
});

如果您想查看工作版本:JSFIDDLE