引导日期选择器在选择后隐藏


97

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

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

任何帮助,将不胜感激。


6
为什么这不是库的默认行为?
体育

Answers:


156

您可以使用event changedate()跟踪更改日期的时间,并使用datepicker('hide')方法datepicker进行选择后隐藏以下内容:

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

演示版

更新

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


7
我建议您另外检查当前的查看模式是否为“天”:if (ev.viewMode === 'days') {$(this).datepicker('hide');}因为您可能不想在选择一个月或一年之后隐藏
datepicker

1
看起来默认情况下autoclose设置为false…… $(".date").datepicker({... autoclose: true, ... });效果很好!
Dani

45

如果对任何人有帮助,则引导日期选择器的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上的最新版本
garryp

使用自动关闭(请参阅@Salim的答案或更新的接受的答案),而不是手动处理事件。如果您在更改日期时隐藏了日期选择器,则尝试输入日期可能会导致不良行为。
停摆


3

如果您希望总体上覆盖日历的行为,请尝试编辑Datepicker函数(在我的示例中为第82行),

    this.autoclose = false;

    this.autoclose = true;

对我来说工作很好,因为我希望所有日历实例的行为都一样。


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

3

该行可以停止,通过以下行阻止输入元素的hide事件:

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


谢了哥们 !我生气了,因为选择日期后输入被隐藏了,这解决了我的问题。干杯!
spacebiker

3
  1. 只需打开 bootstrap-datepicker.js
  2. 找 : var defaults = $.fn.datepicker.defaults
  3. autoclose: true

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


2

在bootstrap 4中使用“ autoHide:true”

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

不错的答案Ankit
Shashank Singh

1

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

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

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

0

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

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

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

关于这个问题的另一个答案与您的完全相同。OP autoclose: true在其示例代码中也有此内容。
93196.93

0

我更改为datetimepicker,格式为“ DD / MM / YYYY”

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

0

至少在我使用的2.2.3版本中,必须使用autoClose代替autoclose。字母大小写很重要。


0

您可以更改源代码bootstrap-datepicker.jsthis.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
 }

0

即使我编写了以下格式,时钟仍然显示问题:'YYYY-MM-DD'

我必须设置pickTime: false,更改后->隐藏,我必须关注- >显示

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

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

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

0

对于日期时间选择器

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

0

使用它作为datetimepicker,它可以正常工作

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.