选择后引导日期采集器隐藏

小开

最佳答案

You can use event changedate() to keep track of when the date is changed together with datepicker('hide') method to hide the datepicker after making selection:

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

Demo

UPDATE

This was the bug with autoclose: true. This bug was fixed in latest master. SEE THE COMMIT. Get the latest code from GitHub

小开

If it's any help to anyone, the Version 2.0 of the bootstrap datepicker no longer works with the accepted answer.

Here's how I got it working on mine:

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

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

小开

You can change source code, bootstrap-datepicker.js. Add this.hide(); like ne

  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
}

小开

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

小开

If you're looking to override the behavior of the calendar in general, globally, try editing the Datepicker function (in my example it was line 82),

from

    this.autoclose = false;

to

    this.autoclose = true;

Worked fine for me, as I wanted to have all my calendar instances behave the same.

小开

I got a perfect solution:

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

小开

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

小开

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

小开

Having problem with clock still showing even if I i wrote format: 'YYYY-MM-DD',

I hade to set pickTime: false and after change->hide I hade to focus->show

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


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


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

小开

I changed to datetimepicker and format to 'DD/MM/YYYY'

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

小开

The problem can be stopped, blocking hide event for input element by this linese:

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

小开

Close datetimepicker when date select(datetimepicker show date with time)

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

小开

For datetime picker

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

小开

Simply open the bootstrap-datepicker.js
find : var defaults = $.fn.datepicker.defaults
set autoclose: true

Save and refresh your project and this should do.

小开

At least in version 2.2.3 that I'm using, you must use autoClose instead of autoclose. Letter case matters.

小开

Use this for datetimepicker, it works fine

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

小开

Haven't seen this mentioned, but this is what fixed it for me:

switchOnClick: true

小开

In bootstrap 4 use "autoHide : true"

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