Approfondimento tags Input relativi alle Date ed agli orari in HTML5 e CSS3 e su iPhone

Oggi approfondiremo il discorso sulle date relativo agli input type, nel caso ho esaminato la usabilità anche su iPhone e saranno di vero aiuto anche per chi sviluppa form per il web sul mobile.

Cominciamo dal tag Date, il quale può avere degli attributi di tipo min, max e step, ecco un esempio di codice nei rispettivi casi:

https://gist.github.com/miniMAC/e7357f07917c46e6bab1

Esempio di codice per l’attributo Datetime e Datetime-local:

https://gist.github.com/miniMAC/d3de8a84421d785b40be

Se vogliamo far scegliere all’utente solo l’anno ed il mese questo è il codice giusto:

https://gist.github.com/miniMAC/3272dbb4ac953120c876

Grazie al tag Week potrete mostrare il numero della settimana, ecco il codice  giusto:

https://gist.github.com/miniMAC/e4b41adaf5673851622d

Se invece volete lavorare solo con le ore del giorno in formato 24 ore ecco il codice:

https://gist.github.com/miniMAC/20f905fbb76f30df2492

Considerazioni lato mobile

Ho testato personalmente ogni tag in esame ed ecco il risultato:

Input Date

input_date_iphone

Input Date min e max: non lavora bene sul mobile (non c’è validazione)

input_date_min_max_iphone

Input Date step: non lavora bene sul mobile (non c’è validazione)

input_date_step_iphone

Input Datetime

input_datetime_iphone

Input Datetime-local

input_datetime_local_iphone

Input Month

input_month_iphone

Input Week: non lavora bene sul mobile (non c’è validazione ed il campo non è corretto)

input_week_iphone

Input Time

input_time

Quindi, in conclusione, possiamo dire che alcuni attributi vanno usati con cautela se parliamo di dispositivi mobili. Tenetene conto quando sviluppate anche sotto questo aspetto!

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *