- Questo articolo è stato scritto da un software engineer di Chrome Kent Tamura.
Come forse avrai già notato, Google Chrome supporta un selettore della data a partire da Chrome 20. Basta impostare l'attributo type dell'elemento input su date, l'utente può fare clic sul pulsante freccia e Chrome aprirà un popup del calendario.
Poiché abbiamo ricevuto molti feedback dagli sviluppatori, in questo articolo vorremmo chiarire alcune informazioni su come ottenere il massimo dall'utilizzo del selettore della data.
In che modo le impostazioni internazionali influiscono sul formato della data del valore di input?
Gli utenti possono digitare un valore di data nel campo di testo di un input[type=date] con il formato della data mostrato nella casella come testo grigio. Questo formato è ottenuto dall'impostazione del sistema operativo.
Gli autori web non hanno modo di modificare il formato della data perché al momento non esistono standard per specificare il formato.
Come viene rappresentato il valore di input durante l'invio a un server?
Il valore di data interpretato da input[type=date] nella richiesta HTTP, ad esempio GET / POST, verrà formattato come yyyy-mm-dd.
Che tipo di formato restituisce il valore di input?
input.value restituisce sempre yyyy-mm-dd, indipendentemente dal formato di presentazione.
Che tipo di formato accetta il valore di input?
Quando imposti input.value in modo programmatico, il valore accetta solo lo stile yyyy-mm-dd indipendentemente dal formato della presentazione sia per il valore iniziale che per il valore JavaScript inserito.
Come faccio a modificare l'aspetto del selettore della data?
Al momento non puoi definire l'aspetto del selettore della data. In WebKit, abbiamo fornito in precedenza dei modi per applicare uno stile ai controlli del modulo con la proprietà CSS -webkit-appearance o con la pseudo selettore della classe ::-webkit-foo. Tuttavia, il popup del calendario non offre questi metodi in WebKit perché è separato dal documento, come un menu popup per <select>, e al momento non esiste uno standard per il controllo dello stile degli elementi secondari.
Come posso evitare conflitti tra il selettore della data di jQuery e quello nativo?
Se hai provato il selettore della data di jQuery su input[type=date] in Google Chrome, potresti aver notato calendari sovrapposti dell'interfaccia utente di jQuery e del popup nativo del calendario.
Se desideri applicare il selettore della data di jQuery su tutte le piattaforme, utilizza input[type=text] anziché input[type=date]. Non solo Google Chrome, ma anche iOS Safari, il browser BlackBerry e Opera hanno una propria UI per input[type=date] e al momento non esiste un modo per ottenere un'interfaccia utente unificata su tutte le piattaforme che utilizzano input[type=date].
Se desideri applicare il selettore della data di jQuery solo su piattaforme che non supportano input[type=date], puoi utilizzare Modernizr o il seguente codice:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();