2010-09-11 22 views
5

Sto usando jQuery Datepicker e ho un piccolo problema.jQuery Datepicker - close on input click

Se il DatePicker è aperto e si fa nuovamente clic sul campo di immissione, non accade nulla. Come posso modificare quello ... il selettore da chiudere sull'ingresso clicca se è già aperto?

Grazie in anticipo ...

+0

come inizializzare datepicker? –

risposta

6

Dal momento che è destinato a focus (per impostazione predefinita), si può semplicemente legare il proprio .mousedown() gestore e non interferirà, in questo modo:

$("#datepicker").datepicker(); 
$("#datepicker").mousedown(function() { 
    $(this).datepicker("hide");  
}); 

You can give it a try here . Sto usando mousedown perché è così che viene rilevato anche il comportamento da vicino, quindi è sufficiente essere coerenti con un comportamento più a prova di futuro.

+0

Grazie mille! – Filip

+0

@Filip - welcome :) –

2

Poiché non posso commentare ancora ...

Una cosa fastidiosa è dal momento che il DatePicker utilizza messa a fuoco, una volta che si nasconderlo, non si può mostrare di nuovo senza sfocature e poi messa a fuoco (così cliccare da qualche parte altro, quindi fare nuovamente clic di nuovo).

Ho risolto questo aggiungendo quanto segue alla risposta di Nick Craver (all'interno del mousedown):

$(this).blur(); 

Così dovrebbe assomigliare a questo:

$("#datepicker").datepicker(); 
$("#datepicker").mousedown(function() { 
    $(this).datepicker("hide"); 
    $(this).blur(); 
}); 
+0

Per me questo apre nuovamente il selettore di date – mbdev

17

Ho trovato un modo migliore. hide sembra non farlo aprire a ulteriori clic. La sfocatura provoca l'apertura del selettore della data un secondo dopo.

ho usato a levetta:

$('.datepicker').mousedown(function() { 
    $('#ui-datepicker-div').toggle(); 
}); 
0

Al fine di lavorare più di una volta (prova a cliccare più volte sul ingresso) si dovrebbe usare:

$("#datepicker").datepicker();  
$("#datepicker").mousedown(function() { 
    var cond = $(this).data('datepicker').dpDiv.is(':visible'); 
    $(this).datepicker(cond ? 'hide' : 'show'); 
}); 
1

questo funziona per me (consolle. il metodo log viene emesso per il test - remove per la produzione):

// call addToggleListener function one time to init 
addToggleListener($('.myDatepickerInputs')); 

// the function 
function addToggleListener(elm) 
{ 
    elm.off('mouseup'); 

    elm.on('mouseup', function() 
    { 
     $(this).off('mouseup'); 
     $(this).datepicker("show"); 

     console.log("show"); 

     $(this).on('mouseup', function() 
     { 
      $(this).off('mouseup'); 
      $(this).datepicker("hide"); 
      addToggleListener($(this)); 

      console.log("hide"); 
     }); 
    }); 
} 

Chiamare la funzione utilizzando i datepicker "onClo se "opzione:

onClose: function() 
{ 
    addToggleListener($(this)); 
} 

Testato con Google Chrome.

+0

Ciao @peterblunt, grazie mille per la tua risposta. Funziona anche per me, ma solo senza chiamare la funzione su Chiudi. Ho una domanda, è possibile fare lo stesso per più datepicker? Ho due datepickers su una pagina, in quanto questo codice funziona solo per il primo. Apprezzerei molto la tua risposta. – jupiteror

+0

Dovrebbe funzionare con tutti gli input datapicker avviati, con classe 'myDatepickerInputs' (in questo esempio). Provato di nuovo - dicendo che funziona. Forse è perché non usi l'opzione 'onClose' per chiamare 'addToggleListener'? Saluti. – peterblunt