web-dev-qa-db-fra.com

Bootstrap datepicker masquer après sélection

Comment masquer le calendrier après la sélection d'une date? Existe-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.

jquerytwitter-bootstrapdatepicker
90
jheul

Vous pouvez utiliser l'événement changedate() pour déterminer quand la date est modifiée avec la méthode datepicker('hide') pour masquer la datepicker après la sélection:

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

démo

UPDATE

C'était le bug avec autoclose: true. Ce bogue a été corrigé dans le dernier maître. VOIR LE COMMIT. Obtenez le dernier code de GitHub

148
Felix

Si cela ne vous aide, la version 2.0 du bootstrap datepicker ne fonctionne plus avec la réponse acceptée.

Voici comment je l'ai fait travailler 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

42
Ola
$('#input').datepicker({autoclose:true});
27
Salim

Le problème peut être arrêté en bloquant l'événement hide de l'élément input par cette ligne:

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

Si vous souhaitez remplacer le comportement du calendrier en général, 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 souhaitais que toutes mes instances de calendrier se comportent de la même manière.

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

Enregistrez et actualisez votre projet et cela devrait faire.

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

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

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

J'ai changé pour datetimepicker et formater à 'JJ/MM/AAAA'

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

J'ai une solution parfaite:

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

Ayant un problème avec l'horloge montrant toujours même si j'ai écrit le format: 'AAAA-MM-JJ',

Je dois définir pickTime: false et après changement-> masquer je dois 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();
});
0
dyrwoolf

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
Vladimir Kulakov
$('.datepicker').datepicker({
    autoclose: true
});
0
user3706926

Pour le sélecteur de date/heure

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

Au moins dans la version 2.2.3 que j'utilise, vous devez utiliser autoClose au lieu de autoclose. Le cas des lettres compte.

0
TimA

Utilisez ceci pour datetimepicker, cela fonctionne bien

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