Come chiudere il selettore di date in modifica per <input type = "date" /> HTML5 Input date element

Question

Ho un campo HTML5 <input type="date" /> e desidero rispondere immediatamente alle date modificate.

Attualmente, il campo di input oscura parzialmente i dati che cambiano quando viene modificata la data, quindi preferirei chiudere automaticamente il selettore di calendario dopo aver modificato una data.

Ho provato a .blur() sul cambiamento, ma questo non ha alcun effetto. L'evento si attiva e posso ottenere il nuovo valore di data, ma il selettore di date non è nascosto. Qualsiasi suggerimento è benvenuto.

.bind('change', function(){ 
    var input = $(this); 
    if(input.is(':valid')) 
    { 
     input.blur(); 
    } 
    }); 

[UPDATE]

Ormai, ho anche fatto ricorso per l'aggiunta di un elemento input aggiuntivo sulla pagina (<input type="text" id="hideMyCalendar" />) e, invece di input.blur(); per fare un $('#hideMyCalendar').focus(); ma anche questo non si nasconde il selezionatore, anche se l'attenzione è visivamente portata a un controllo diverso. A questo punto, suppongo, l'unico modo possibile sarebbe quello di chiamare un metodo specifico per Chrome (webkit), ma non ho ancora scoperto un tale metodo per esistere (ancora).

Answer 1

Prova questo:

$(".selector").datepicker("hide"); 

Riferimento: http://api.jqueryui.com/datepicker/#method-hide

Answer 2

così Preferirei chiusura automatica il selettore di calendario dopo la data viene modificata

HTML 5 input type="date" fa non specificare come questo input dovrebbe essere realizzato dai browser. Può essere un datepicker grafico, può essere una semplice convalida su un input dell'utente, qualunque sia il venditore del browser che desidera implementare.

Quindi, nascondere il "datepicker", che è in realtà un browser dipendente, non è possibile in modo cross-browser.

Tuttavia, è possibile utilizzare lo jQuery UI datepicker, in cui si ha il controllo completo su come viene visualizzato e nascosto.

Answer 3

01/30/14 Questo non funziona più

Questo è brutto, ma funziona per Chrome.

function closeDate() { 
    $('#txtDate').attr('type', 'text'); 
    $('#txtDate').attr('type', 'date'); 
} 

Questo è l'unico modo in cui sono stato in grado di chiudere la data di HTML5 dopo aver selezionato una data. Basta rimuovere l'attributo data, quindi applicarlo di nuovo. Il valore viene mantenuto e sembra appena chiuso manualmente.

UPDATE:

Questo è il metodo che utilizzo per fare tutti i tipi di data di chiusura in questo modo:

$(document).ready(function() { 
    //make all date html5 close on change in chrome 
    $('input[type="date"]').change(function() { 
     closeDate(this); 
    }); 

}); 

function closeDate(dateInput) { 
    $(dateInput).attr('type', 'text'); 
    $(dateInput).attr('type', 'date'); 
} 

Answer 4

Lei ha detto (in your comment):

Io preferisco il Elemento input HTML5 perché spero che questo porti unità al web.

Eppure siete disposti a chiamare un metodo specifico per il webkit? (In the update to the question):

Ormai, presumo, l'unico modo possibile sarebbe quella di chiamare un metodo specifico di cromo (WebKit), ma io non sono fonte di un tale metodo di esistere (ancora).

Penso che non sia lo scopo. Quindi avrai bisogno di un metodo specifico di Opera, un metodo specifico di IE, un metodo specifico per Firefox e così via ... non più unità al web.

Se si desidera veramente un'esperienza utente singola tra i vari browser, andare su jQuery UI. Non solo ti dà la versatilità di fare ciò che vuoi (come Nil'z points out), ti dà anche lo stesso comportamento su browser eterogenei.

---

Invece di utilizzare HTML5 ove disponibile. Quello che dovresti fare è tornare a HTML5 quando JavaScript non è disponibile. Questo sta usando . In effetti jQuery è progettato per fare che per default ...

Basta creare HTML5 (e HTML4 compatibile) campo:

<input type="date" name="date" id="date" value="" /> 

tuo jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js></script> 
<script type="text/javascript" src="js/jquery-ui.js"></script> 

E lo script:

<script type="text/javascript"> 
    $('#date').datepicker(); 
</script> 

Il risultato finale sarà che tutti i browser su cui jQuery può essere eseguito utilizzeranno il DatePicker basato su jQuery, se JavaScript non è disponibile, utilizzerà datepicker HTML5 e, infine, se il browser non supporta HTML5, sarà solo un campo di testo. Questo è un degrado grazioso.

---

E, naturalmente, si utilizzerà il hide method from jQuery datepicker:

$(".selector").datepicker("hide"); 

Nota: +1 per Nil'z

---

so che non ho risposto alla domanda, ma questo risolve il problema