C'è un modo per localizzare input type = "data" in HTML5

Question

So che, al momento della stesura di questo solo Opera supporta un'interfaccia utente del browser per

<input type="date" name="mydate"> 

e forse i miei tentativi di localizzare questo campo sono stati incontrato frustrazione perché non sono ancora state incluse nella loro implementazione sottigliezze come la localizzazione, ma non ne vedo nemmeno menzione nelle specifiche HTML5. C'è un modo per specificare la localizzazione? Dovrei fare lang = "fr" su un elemento genitore?

Alcune note sulla realizzazione del sito in questione:

• localizzazione (lingua) è esplicitamente scelto dall'utente, perché sono la gestione dei dati in più lingue e non è ragionevole aspettarsi che il browser dell'utente chrome è nella lingua visualizzata o che il browser sta fornendo le intestazioni di richiesta della lingua desiderata.
• Voglio essere sicuro che se la pagina è resa in francese che il selettore data fornito dal browser chrome mostra opzioni che hanno senso per la lingua francese.
• Il piano è quello di ricadere jQueryUI per i browser che non supportano type = "data", userò il meccanismo di rilevamento previsto Dive into HTML 5

Answer 1

da quello che so, il pensiero dietro ciò che facciamo in Opera (full disclosure: lavoro per loro) è che il data picker è quasi un'estensione del chrome, un controllo nativo del browser. In quanto tale, sarà localizzato in base alla lingua del browser, piuttosto che alla lingua della pagina visualizzata.

Answer 2

Sono d'accordo con lambacck. Attualmente sto scrivendo il codice Javascript per rendere disponibili le nuove funzionalità del modulo cross browser, utilizzando l'interfaccia utente jQuery per questo.

Lavoro in Lussemburgo, che è un buon posto per illustrare il problema di localizzazione in modo più dettagliato.

La maggior parte dei siti Web che scriviamo sono multilingue de | fr | en. Dalle nostre statistiche possiamo dire che le persone usano il cambio di lingua sul sito per mostrare la loro lingua preferita, ma questa scelta raramente corrisponde alle impostazioni locali preferite del browser.

Se le impostazioni internazionali del campo calendario, ecc è fatto dal sistema operativo, questo ci riporta allo sfortunato < ingresso   type = file di > situazione in cui l'etichetta si legge Carica un file e il pulsante dice Parcourir. Non puoi fare nulla per questo mix linguistico e ho sempre trovato che questo sia un grosso fastidio.

Conclusione, devo sovrascrivere il calendario predefinito con quello jQuery per essere sicuro che faccia ciò che voglio.

A mio parere, un'API configurabile o almeno un modo per manipolare la locale su un livello HTML sarebbe ottima. Poiché i nuovi tipi di campo non sono ancora ampiamente adottati dagli altri produttori di browser, immagino che questo problema possa ancora essere preso in considerazione.

Grazie per aver letto questo.

Answer 3

Per dispositivi mobili, la soluzione migliore che abbiamo trovato è quella di utilizzare un input di testo per l'inserimento della data, con un'icona di calendario accanto ad essa che ha una data invisibile inserita sopra l'icona.

Vantaggi:

• funziona su tutti i browser e dispositivi
• possibile utilizzare il pulsante successivo in data su iOS (se più campi)
• utente può digitare la data (molto utile)
• evita Bug di iOS UI (1. modifica dei dati esistenti con una data vuota, successiva alla data, il valore della data è impostato su oggi - arrrgh, 2. visualizzazione tastiera, data successiva, popup e tastiera scompare - ouch)
• utilizzare una libreria dataper mostrare la data in input come set di localizzazione per l'account dell'utente (non per il browser) e può utilizzare una libreria di smart data (digitare "domani" ecc.).
• clic sull'icona del calendario per vedere la data come la localizzazione del browser
• fallback grazioso anche se input type=date non supportato dal dispositivo/navigatore (ad esempio alcuni dispositivi Android non supportano data o avere gravi bug).
• per desktop (rilevati dal supporto per non toccare) mostriamo il nostro menu a discesa personalizzato.

HTML è un qualcosa di simile:

<input type=text> 
<span style=position:relative> 
    <input type=date class=date-input tabIndex=-1> 
    <div class=date-input-icon>&#x25BC;</div> 
</span> 

CSS:

.date-input { 
    position: relative; 
    z-index: 1; 
    webkit-appearance: none; 
    display: inline-block; 
    opacity: 0; 
    width: 1em; 
} 

.date-input-icon { 
    position: absolute; 
    right: 0; 
    width: 1em; 
}