Question

我使用最新的Bootstrap datepicker.js。一切正常，但是当我从下拉列表中选择一个日期时，它不会自动关闭它。我搜索了网页并尝试在我的javascript中使用以下功能，如下所示：

 $('#selectDate').datepicker({
    autoclose: true
}).on('changeDate', function (ev) {
    (ev.viewMode == 'days') ? $(this).datepicker('hide') : '';      
});

但是当我使用谷歌Chrome开发工具时，我意识到ev.viewmode未定义。我不确定如何前进。

Answer 1

试试这个：

$('#selectDate').datepicker()
.on('changeDate', function(ev){                 
    $('#selectDate').datepicker('hide');
});

<强>更新

当您使用github上存在的更新版本的datepicker时，

autoclose正常工作：

https://github.com/eternicode/bootstrap-datepicker

Answer 2

我添加 autoclose：true，（最后使用半逗号并且有效）

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

Answer 3

以上都没有为我工作，但是覆盖datepicker默认选项就像魅力一样，并且是一个单行：

$.fn.datepicker.defaults.autoclose = true;

Answer 4

试试这个：

$('#selectDate').datepicker().on('changeDate', function(ev)
{                 
     $('.datepicker').hide();
});

Answer 5

如果您有多个已应用了datepicker的文本框，那么旧的解决方案可能会导致问题，请试试这个，

$('.datepicker').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on('changeDate', function (ev) {
     $(this).datepicker('hide');
});

请注意，https://github.com/eternicode/bootstrap-datepicker/issues/500

注意：别忘了，我们正在使用jquery的类选择器，所以你需要将datepicker类应用于您的文本框。

Answer 6

只需打开bootstrap-datepicker.js
find：var defaults = $ .fn.datepicker.defaults （在我的案例中为1391行）
设置autoclose：true

保存并刷新您的项目，这应该做。

Answer 7

对我来说，它最终是bootstrap-datepicker文档中的拼写错误。而不是“autoclose：true”，它是“autoClose：true”。

希望它有所帮助。

Answer 8

// 10000％的工作转到bootstrap-datepicker.js文件

搜索：

'mousedown touchstart': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },

Answer 9

当您将鼠标悬停在带有defaultdatepicker类的div上时。日历控件将出现。在Mouseleave上，它会消失。

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: 'dd/mm/yyyy',
            todayHighlight: 'TRUE',
            autoClose: true,
        });

        $('#datepicker').css({ "opacity": "1" });
    });

    $('.defaultdatepicker').on('mouseleave', function () {
        $('.datepicker').fadeOut(function () {
            $('.formattedStartDate').attr('class', 'formattedStartDate');

            $('#datepicker').css({ "opacity": "0" });
        });
    });

Answer 10

这对我有用。

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on('change', function (ev) {
    $(this).datepicker('hide');
});

Answer 11

尝试一下。对我来说有用。

<input data-auto-close="true" type="text" class="datepicker-here"/>

Answer 12

这对我有用

$(".date-picker").change(function() { 
    setTimeout(function() {
        $(".date-picker").datepicker('hide'); 
        $(".date-picker").blur();
    }, 50);
});

选择日期后，Bootstrap datepicker不会自动关闭

12 个答案: