web-dev-qa-db-fra.com

Le sélecteur de date Bootstrap ne se ferme pas automatiquement après la sélection d'une date

J'utilise le dernier fichier bootstrap datepicker.js. Tout fonctionne bien, sauf que lorsque je choisis une date dans le menu déroulant, elle ne la ferme pas automatiquement. J'ai cherché sur le Web et essayé d'utiliser la fonction suivante dans mon javascript comme suit: 

 $('#selectDate').datepicker({
    autoclose: true
}).on('changeDate', function (ev) {
    (ev.viewMode == 'days') ? $(this).datepicker('hide') : '';      
});

mais lorsque j'utilise les outils de Google Chrome Dev, je me suis aperçu qu'ev.viewmode n'était pas défini. Je ne sais pas comment aller de l'avant. 

javascriptjquerytwitter-bootstrapdatepicker
19
AlliceSmash

Essaye ça:

$('#selectDate').datepicker()
.on('changeDate', function(ev){                 
    $('#selectDate').datepicker('hide');
});

Mettre à jour:

autoclose fonctionne correctement lorsque vous utilisez la version mise à jour de datepicker présente sur github:

https://github.com/eternicode/bootstrap-datepicker

20
Mukesh Chapagain

J'ai ajouté autoclose: true, (avec demi virgule à la fin et cela fonctionne)

 $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    autoclose: true,
})
12
Chaitanya K

Aucun de ce qui précède n'a fonctionné pour moi, mais remplacer l'option par défaut de datepicker a fonctionné comme un charme et est un one-liner:

$.fn.datepicker.defaults.autoclose = true;
10
northernman

Essaye ça:

$('#selectDate').datepicker().on('changeDate', function(ev)
{                 
     $('.datepicker').hide();
});
9
Ibrohim Ermatov

Si vous avez appliqué plusieurs zones de texte pour lesquelles vous avez appliqué datepicker, l’ancienne solution risque de poser problème, Essayez plutôt ceci,

$('.datepicker').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on('changeDate', function (ev) {
     $(this).datepicker('hide');
});

Regardez ceci, https://github.com/eternicode/bootstrap-datepicker/issues/500

Note: N'oubliez pas, nous utilisons le sélecteur de classe de jquery, donc vous devez appliquer la classe datepicker à votre zone de texte.

7
Aniket Bhansali

Pour moi, il s’est avéré qu’il s’agissait d’une faute de frappe dans la documentation bootstrap-datepicker . Au lieu de "autoclose: true", c’est "autoClose: true".

J'espère que ça aide.

2
Nick Verheijen
  1. Ouvrez simplement le fichier bootstrap-datepicker.js
  2. find: var default = $ .fn.datepicker.defaults (La ligne 1391 dans mon cas)
  3. set autoclose: true

Enregistrez et actualisez votre projet et cela devrait faire.

2
user3615318

// 10000% work Accédez au fichier bootstrap-datepicker.js 

Rechercher ceci:

'mousedown touchstart': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },
0
doshi smit

Cela fonctionne pour moi.

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on('change', function (ev) {
    $(this).datepicker('hide');
});
0
Muzammil Hussain

Lorsque vous survolez la div avec la classe datepicker par défaut. Le contrôle du calendrier apparaîtra. Sur Mouseleave, il disparaîtra.

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: 'dd/mm/yyyy',
            todayHighlight: 'TRUE',
            autoClose: true,
        });

        $('#datepicker').css({ "opacity": "1" });
    });

    $('.defaultdatepicker').on('mouseleave', function () {
        $('.datepicker').fadeOut(function () {
            $('.formattedStartDate').attr('class', 'formattedStartDate');

            $('#datepicker').css({ "opacity": "0" });
        });
    });
0
Tumelo Moropane