Bootstrap datepicker hide after selection

Question

How do I hide the calendar after a date is selected? Is there a specific function that I can use? My code below:

$(\'#dp1\').datepicker({
    format: \'mm-d         


        

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

Use this for datetimepicker, it works fine

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

Answer 5

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

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

Answer 6

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