Bootstrap datepicker 选择后隐藏答案

【问题标题】：Bootstrap datepicker hide after selectionBootstrap datepicker 选择后隐藏
【发布时间】：2014-02-04 18:32:21
【问题描述】：

如何在选择日期后隐藏日历？有我可以使用的特定功能吗？我的代码如下：

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

任何帮助将不胜感激。

【问题讨论】：

为什么这不是库的默认行为？

标签： jquery twitter-bootstrap datepicker

【解决方案1】：

您可以使用事件changedate() 来跟踪日期何时更改以及datepicker('hide') 方法在选择后隐藏datepicker：

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

Demo

更新

这是autoclose: true 的错误。此错误已在最新的 master 中修复。查看 COMMIT。从 GitHub

获取最新代码

【讨论】：

我建议另外检查当前视图模式是否为“天”：if (ev.viewMode === 'days') {$(this).datepicker('hide');} 因为您可能不想在选择一个月或一年后隐藏日期选择器}
看起来自动关闭默认设置为 false...$(".date").datepicker({... autoclose: true, ... }); 很好用！！！

【解决方案2】：

如果对任何人有任何帮助，则引导日期选择器的 2.0 版不再适用于已接受的答案。

这是我的工作方式：

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

见http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate

【讨论】：

有第 2 版吗？我认为 v1.6.4 是 Github 上的最新版本
使用自动关闭（请参阅@Salim 的答案或更新后的接受答案），而不是手动处理事件。如果您在更改日期时隐藏日期选择器，则尝试输入日期可能会导致不必要的行为。

【解决方案3】：

$('#input').datepicker({autoclose:true});

【讨论】：

【解决方案4】：

只需打开bootstrap-datepicker.js
找到：var defaults = $.fn.datepicker.defaults
设置autoclose: true

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

【讨论】：

【解决方案5】：

如果您希望全局覆盖日历的一般行为，请尝试编辑 Datepicker 函数（在我的示例中为第 82 行），

来自

    this.autoclose = false;

到

    this.autoclose = true;

对我来说工作得很好，因为我想让我的所有日历实例的行为都一样。

【讨论】：

不需要更改js库中的默认属性。您可以在调用它时将其作为对象的属性传递给函数。示例：$('#dob').datepicker({format: 'dd/mm/yyyy', autoclose:true});

【解决方案6】：

这个问题可以停止，通过这条线阻止输入元素的隐藏事件：

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});

【讨论】：

谢谢伙计！我很生气，因为在选择日期后输入被隐藏了，这解决了我的问题。干杯！

【解决方案7】：

在 bootstrap 4 中使用“autoHide : true”

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

【讨论】：

很好的答案 Ankit

【解决方案8】：

选择日期时关闭 datetimepicker(datetimepicker 显示日期和时间)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
});

【讨论】：

【解决方案9】：

$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

【讨论】：

【解决方案10】：

我有一个完美的解决方案：

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

【讨论】：

【解决方案11】：

$('.datepicker').datepicker({
    autoclose: true
});

【讨论】：

这个问题的另一个答案和你的完全一样。 OP 在他们的示例代码中也有这个autoclose: true。

【解决方案12】：

我改为 datetimepicker 并格式化为 'DD/MM/YYYY'

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

【讨论】：

【解决方案13】：

至少在我使用的版本 2.2.3 中，您必须使用 autoClose 而不是 autoclose。字母大小写很重要。

【讨论】：

【解决方案14】：

您可以更改源代码，bootstrap-datepicker.js。加this.hide();点赞

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

【讨论】：

【解决方案15】：

即使我写了格式，时钟仍然显示有问题：'YYYY-MM-DD'，

我必须设置 pickTime: false 并在 change->hide 之后我必须focus->显示

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

【讨论】：

【解决方案16】：

对于日期时间选择器

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

【讨论】：

【解决方案17】：

将它用于日期时间选择器，它工作正常

$('#Date').data("DateTimePicker").hide();

【讨论】：

【解决方案18】：

没有看到提到过，但这就是为我解决的问题：

switchOnClick: true

【讨论】：