Question

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

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

}）;

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

Answer 1

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

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

和

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

然后默认会有你想要的行为。

Answer 2

尝试

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

Answer 3

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

Answer 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();
        }
    }
});

单击另一个datepicker输入时关闭bootstrap datepicker对话框

4 个答案: