Le sélecteur de date Bootstrap se cache après la sélection

Comment masquer le calendrier après la sélection d'une date? Y a-t-il une fonction spécifique que je peux utiliser? Mon code ci-dessous:

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

Toute aide serait appréciée.

Vous pouvez utiliser l'événement changedate()pour suivre le moment où la date est modifiée avec une datepicker('hide')méthode pour masquer le datepickeraprès avoir fait la sélection:

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

Démo

METTRE À JOUR

C'était le bug avec autoclose: true. Ce bogue a été corrigé dans le dernier master. VOIR LE COMMIT. Obtenez le dernier code deGitHub

Si cela aide quelqu'un, la version 2.0 du sélecteur de date bootstrap ne fonctionne plus avec la réponse acceptée.

Voici comment je l'ai fait fonctionner sur le mien:

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

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

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

Si vous cherchez à remplacer le comportement du calendrier en général, globalement, essayez de modifier la fonction Datepicker (dans mon exemple, c'était la ligne 82),

de

    this.autoclose = false;

à

    this.autoclose = true;

Cela a bien fonctionné pour moi, car je voulais que toutes mes instances de calendrier se comportent de la même manière.

Le problème peut être arrêté, bloquant l'événement hide pour l'élément d'entrée par ce linese:

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

1. Ouvrez simplement le bootstrap-datepicker.js
2. trouver : var defaults = $.fn.datepicker.defaults
3. ensemble autoclose: true

Enregistrez et actualisez votre projet et cela devrait faire.

Dans bootstrap 4, utilisez "autoHide: true"

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

Fermer datetimepicker lorsque la date est sélectionnée (datetimepicker afficher la date avec l'heure)

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

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

J'ai une solution parfaite:

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

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

J'ai changé pour datetimepicker et le format en 'JJ / MM / AAAA'

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

Au moins dans la version 2.2.3 que j'utilise, vous devez utiliser à la autoCloseplace de autoclose. La casse des lettres compte.

Vous pouvez changer le code source, bootstrap-datepicker.js . Ajouter this.hide();comme 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
 }

Problème d'horloge toujours affiché même si j'ai écrit le format: 'AAAA-MM-JJ' ,

Je dois régler pickTime: falseet après le changement-> cacher je dois me concentrer- > montrer

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

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

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

Pour le sélecteur de date / heure

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

Utilisez ceci pour datetimepicker, cela fonctionne très bien

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

Je n'ai pas vu cela mentionné, mais c'est ce qui a résolu le problème pour moi:

switchOnClick: true