Bootstrap datepicker nascondere dopo la selezione


97

Come si nasconde il calendario dopo aver selezionato una data? C'è una funzione specifica che posso usare? Il mio codice qui sotto:

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

Qualsiasi aiuto sarebbe apprezzato.


6
Perché non è questo il comportamento predefinito della libreria?
sport

Risposte:


156

È possibile utilizzare l'evento changedate()per tenere traccia di quando la data viene modificata insieme al datepicker('hide')metodo per nascondere la datepickerdopo aver effettuato la selezione:

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

Demo

AGGIORNARE

Questo era il bug con autoclose: true. Questo bug è stato corretto nell'ultimo master. GUARDA IL COMMIT. Ottieni il codice più recente daGitHub


7
Consiglierei inoltre di controllare se la modalità di visualizzazione corrente è "giorni": if (ev.viewMode === 'days') {$(this).datepicker('hide');}poiché probabilmente non si desidera nascondere il selettore di date dopo aver selezionato un mese o un anno}
turan

1
Sembra che la chiusura automatica sia impostata su false per impostazione predefinita ... $(".date").datepicker({... autoclose: true, ... });funziona bene !!!
Dani

45

Se può aiutare qualcuno, la versione 2.0 del datepicker bootstrap non funziona più con la risposta accettata.

Ecco come l'ho fatto funzionare sul mio:

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

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


Esiste una versione 2? Vedo v1.6.4 come l'ultima versione su Github
garryp

Utilizza la chiusura automatica (vedi la risposta di @ Salim o la risposta accettata aggiornata) invece di gestire manualmente l'evento. Se nascondi il selettore di date quando la data viene modificata, il tentativo di digitare la data può causare comportamenti indesiderati.
sbilenco

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

4
Questa è la risposta perfetta. Questa dovrebbe essere la risposta approvata.
Sarower Jahan

3

Se stai cercando di sovrascrivere il comportamento del calendario in generale, a livello globale, prova a modificare la funzione Datepicker (nel mio esempio era la riga 82),

a partire dal

    this.autoclose = false;

per

    this.autoclose = true;

Ha funzionato bene per me, poiché volevo che tutte le mie istanze di calendario si comportassero allo stesso modo.


2
Non è necessario modificare le proprietà predefinite nella libreria js. Puoi passarlo come proprietà dell'oggetto alla funzione quando lo chiami. Esempio: $ ('# dob'). Datepicker ({format: 'dd / mm / yyyy', autoclose: true});
Zeeshan

3

Il problema può essere risolto, bloccando l'evento nascondi per l'elemento di input da questo linese:

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


Grazie compagno ! mi stavo arrabbiando perché l'input è stato nascosto dopo la selezione della data, e questo ha risolto il mio problema. Saluti !
Spacebiker

3
  1. Apri semplicemente il file bootstrap-datepicker.js
  2. trova : var defaults = $.fn.datepicker.defaults
  3. impostato autoclose: true

Salva e aggiorna il tuo progetto e questo dovrebbe bastare.


2

In bootstrap 4 usa "autoHide: true"

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

Bella risposta Ankit
Shashank Singh

1

Chiudi datetimepicker quando si seleziona la data (datetimepicker mostra la data con l'ora)

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

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

0

Ho una soluzione perfetta:

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

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

Un'altra risposta a questa domanda è esattamente la stessa della tua. Anche OP ha questo autoclose: truenel loro codice di esempio.
93196.93

0

Ho cambiato in datetimepicker e formato in "GG ​​/ MM / AAAA"

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

0

Almeno nella versione 2.2.3 che sto usando, devi usare al autoCloseposto di autoclose. Il caso delle lettere è importante.


0

Puoi modificare il codice sorgente, bootstrap-datepicker.js . Aggiungi this.hide();come 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

Il problema con l'orologio continua a essere visualizzato anche se ho scritto il formato: 'AAAA-MM-GG' ,

Dovevo impostare pickTime: falsee dopo il cambiamento-> nascondi dovrei mettere a fuoco-> mostrare

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

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

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

0

Per il selettore di data e ora

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

0

Usa questo per datetimepicker, funziona bene

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

0

Non l'ho visto menzionato, ma questo è ciò che mi ha risolto:

switchOnClick: true
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.