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


97

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.


6
Pourquoi n'est-ce pas le comportement par défaut de la bibliothèque?
sports

Réponses:


156

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


7
Je recommanderais en outre de vérifier si le mode d'affichage actuel est «jours»: if (ev.viewMode === 'days') {$(this).datepicker('hide');}car vous ne voulez probablement pas masquer le sélecteur de date après avoir sélectionné un mois ou une année}
turan

1
On dirait que la fermeture automatique est définie sur false par défaut ... $(".date").datepicker({... autoclose: true, ... });fonctionne bien !!!
Dani

45

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


Il y a une version 2? Je vois la v1.6.4 comme la dernière version sur Github
Garryp

Utilisez la fermeture automatique (voir la réponse de @ Salim ou la réponse acceptée mise à jour) au lieu de gérer l'événement manuellement. Si vous masquez le sélecteur de date lorsque la date est modifiée, la tentative de saisie de la date peut entraîner un comportement indésirable.
Déséquilibré

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

4
C'est la réponse parfaite. Cela devrait être la réponse approuvée.
Sarower Jahan

3

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.


2
Pas besoin de changer les propriétés par défaut dans la bibliothèque js. Vous pouvez le transmettre en tant que propriété de l'objet à la fonction lorsque vous l'appelez. Exemple: $ ('# dob'). Datepicker ({format: 'jj / mm / aaaa', autoclose: true});
Zeeshan

3

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


Merci mon pote ! Je devenais fou parce que l'entrée était cachée après la sélection de la date, et cela a résolu mon problème. À votre santé !
spacebiker

3
  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.


2

Dans bootstrap 4, utilisez "autoHide: true"

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

Belle réponse Ankit
Shashank Singh

1

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

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

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

0

J'ai une solution parfaite:

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

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

Une autre réponse à cette question est exactement la même que la vôtre. OP l'a également autoclose: truedans son exemple de code.
93196.93

0

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

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

0

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


0

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
 }

0

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

0

Pour le sélecteur de date / heure

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

0

Utilisez ceci pour datetimepicker, cela fonctionne très bien

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

0

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

switchOnClick: true
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.