- Questo articolo è stato scritto da Kent Tamura, ingegnere software di Chrome.
Come potresti aver già notato, Google Chrome supporta un selettore della data da Chrome 20. Se imposti l'attributo type dell'elemento input su date, l'utente può fare clic sul pulsante a forma di freccia e Chrome mostrerà un bel widget del calendario.
Poiché abbiamo ricevuto molti feedback dagli sviluppatori, in questo articolo vorremmo chiarire alcune cose 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 visualizzato nella casella in grigio. Questo formato viene ottenuto dall'impostazione del sistema operativo.
Gli autori web non possono 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 della 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 viene sempre restituito come yyyy-mm-dd, indipendentemente dal formato della presentazione.
Quale tipo di formato accetta il valore di input?
Quando imposti input.value in modo programmatico, il valore accetta solo lo stile yyyy-mm-dd a prescindere dal formato di presentazione sia per il valore iniziale sia per il valore inserito da JavaScript.
Come faccio a modificare l'aspetto del selettore della data?
Al momento non puoi impostare lo stile dell'aspetto del selettore della data. In WebKit, in passato abbiamo fornito modi per applicare stili ai controlli dei moduli con la proprietà CSS -webkit-appearance o il selettore di pseudo classi ::-webkit-foo. Tuttavia, il popup del calendario non fornisce questi metodi in WebKit perché è separato dal documento, come un menu popup per <select>, e al momento non esiste uno standard per controllare lo stile dei relativi elementi secondari.
Come faccio ad evitare conflitti tra jQuery Datepicker e il selettore della data nativo?
Se hai provato jQuery Datepicker su input[type=date] in Google Chrome, potresti aver notato la sovrapposizione dei calendari nell'interfaccia utente di jQuery e nel popup nativo del calendario.
Per applicare jQuery Datepicker a tutte le piattaforme, utilizza input[type=text] anziché input[type=date]. Non solo Google Chrome, ma anche Safari per iOS, il browser BlackBerry e Opera hanno una propria interfaccia utente per input[type=date] e al momento non esiste un modo per ottenere una UI unificata su tutte le piattaforme utilizzando input[type=date].
Se vuoi applicare jQuery Datepicker solo su piattaforme senza supporto di 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();