选择后,Bootstrap datepicker隐藏

时间:2014-01-16 01:33:51

标签: jquery twitter-bootstrap datepicker

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

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

任何帮助都将不胜感激。

18 个答案:

答案 0 :(得分:142)

您可以使用事件changedate()跟踪日期的变化以及datepicker('hide')方法,以便在选择后隐藏datepicker

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

Demo

<强>更新

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

获取最新代码

答案 1 :(得分:41)

如果它对任何人有任何帮助,则引导程序日期选择器的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 :(得分:25)

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

答案 3 :(得分:3)

  1. 只需打开bootstrap-datepicker.js
  2. 即可
  3. 查找:var defaults = $.fn.datepicker.defaults
  4. 设置autoclose: true
  5. 保存并刷新您的项目,这应该做。

答案 4 :(得分:3)

问题可以通过这个linese阻止输入元素的隐藏事件:

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

答案 5 :(得分:2)

在bootstrap 4中,使用“ autoHide:true”

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

答案 6 :(得分:2)

如果您想要全局覆盖日历的行为,请尝试编辑Datepicker函数(在我的示例中为第82行),

    this.autoclose = false;

    this.autoclose = true;

我工作得很好,因为我希望所有的日历实例都表现相同。

答案 7 :(得分:1)

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

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

答案 8 :(得分:1)

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

答案 9 :(得分:0)

我得到了一个完美的解决方案:

reader.Decode()

答案 10 :(得分:0)

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

答案 11 :(得分:0)

即使我写的格式仍然显示时钟问题:'YYYY-MM-DD'

我需要设置pickTime: false并在更改 - >隐藏后,我需要 focus-&gt; show

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

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

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

答案 12 :(得分:0)

我更改为 datetimepicker 并格式化为&#39; DD / MM / YYYY&#39;

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

答案 13 :(得分:0)

日期时间选择器

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

答案 14 :(得分:0)

至少在我使用的2.2.3版本中,您必须使用autoClose代替autoclose。信件案件很重要。

答案 15 :(得分:0)

将它用于datetimepicker,它工作正常

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

答案 16 :(得分:0)

没有看到此内容,但这是为我解决的问题:

switchOnClick: true

答案 17 :(得分:0)

您可以更改源代码 bootstrap-datepicker.js 。 像ne

一样添加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
 }