引导日期选择器不关闭

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. 更正您的班级参考资料
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

Answer 2

从下拉日历中选择日期后，您只需单击日历外的任意位置即可将其关闭，但如果您希望在选择日期时关闭日历，请执行以下操作

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

Answer 3

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

您需要明确添加 autoclose: true，否则，其默认值为 false。

Answer 4

Bootstrap datepicker 默认将 autoclose 选项设置为 false。 您应该在 true 上设置 autoclose 选项。

查看参考：https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference