单击另一个日期选择器输入时关闭引导日期选择器对话框答案

【问题标题】：Close bootstrap datepicker dialog when another datepicker input is clicked单击另一个日期选择器输入时关闭引导日期选择器对话框
【发布时间】：2013-11-19 17:00:13
【问题描述】：

我有一个引导日期选择器输入框列表，它们都使用相同的 .datepicker 类。对话框按预期显示和更新。我的问题是我希望在单击另一个日期选择器输入时自动关闭以前的日期选择器对话框。目前他们都保持开放。附上我非常简单的日期选择器功能。

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

});

他们每个人都需要一个唯一的类/ID 才能工作吗？让我知道我错过了什么......

【问题讨论】：

标签： jquery twitter-bootstrap datepicker

【解决方案1】：

更简单的解决方案：只需使用不是“datepicker”的类来定位您的输入，例如：

<input class="dp" type="text" name="start_date" />

和：

$('.dp').datepicker();

那么它就会默认有你想要的行为。

【讨论】：

为我工作，谢谢。请注意，“datetimepicker”也是如此——实际上任何其他 CSS 类或 id/name/element 选择器都可以正常工作。似乎是因为这些类是由 JS 插件在内部用于覆盖的，而不是应用于输入元素。

【解决方案2】：

试试

$(".datepicker").mousedown(function(){
    $(".datepicker").datepicker('hide');
});

【讨论】：

【解决方案3】：

使用 id 选择器而不是 class 使其工作。当然，每个输入都不同。

【讨论】：

【解决方案4】：

我是这样做的，假设您使用的是https://github.com/Eonasdan/bootstrap-datetimepicker：

$el.datetimepicker(options).on('dp.show', function (evntObj) {
    if ($el.attr('id') === 'startPicker') {
        var endPicker = $('#endPicker').data('DateTimePicker');

        if (endPicker.widget.is(':visible')) {
            endPicker.hide();
        }
    } else {
        var startPicker = $('#startPicker').data('DateTimePicker');

        if (startPicker.widget.is(':visible')) {
            startPicker.hide();
        }
    }
});

【讨论】：