- 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. Basta impostare l'attributo type dell'elemento input su date per consentire all'utente di fare clic sul pulsante a forma di freccia e visualizzare un pratico widget del calendario in Chrome.
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 inserito?
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 testo grigio. Questo formato viene 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 specificarlo.
Come viene rappresentato il valore dell'input quando viene inviato 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 inserito?
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, indipendentemente dal formato di presentazione sia per il valore iniziale sia per il valore iniettato in 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 di jQuery UI e del popup del calendario nativo.
Se vuoi applicare jQuery Datepicker su 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 UI per input[type=date] e al momento non è possibile ottenere un'interfaccia utente unificata su tutte le piattaforme che utilizzano 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();