¿Hay una manera de localizar input type = "fecha" en HTML5

Question

Sé que en el momento de escribir estas líneas solamente Opera soporta una interfaz de usuario del navegador para

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

y tal vez mis intentos para localizar este campo han sido Me encontré con la frustración porque las sutilezas como la localización aún no se han incluido en su implementación, pero ni siquiera lo veo en las especificaciones de HTML5. ¿Hay alguna manera de especificar la localización? ¿Debo hacer lang = "fr" en un elemento padre?

Algunas notas sobre la aplicación del sitio en cuestión:

• localización (idioma) es recogido explícitamente por el usuario, ya que son la gestión de datos en varios idiomas y no es razonable esperar que el navegador del usuario Chrome está en el idioma que se está viendo o que el navegador proporciona los encabezados de solicitud de idioma deseados.
• Quiero estar seguro de que si la página se representa en francés, el selector de fechas proporcionado por el navegador Chrome muestra las opciones que tienen sentido para el idioma francés.
• El plan es volver a caer a jQueryUI para los navegadores que no soportan type = "fecha", voy a utilizar el mecanismo de detección proporcionada en Dive into HTML 5

Answer 1

Por lo que sé, la idea detrás de lo que hacemos en Opera (descripción completa: yo trabajo para ellos) es que el selector de fecha es casi una extensión de Chrome, un control nativo del navegador. Como tal, se localizará de acuerdo con el idioma del navegador, en lugar del idioma de la página que se está viendo.

Answer 2

Estoy de acuerdo con lambacck. Actualmente estoy escribiendo un código Javascript para hacer que las nuevas funciones de formulario estén disponibles en el navegador, usando la interfaz de usuario de jQuery para esto.

Trabajo en Luxemburgo, que es un buen lugar para ilustrar el problema de localización con más detalle.

La mayoría de los sitios web que escribimos son multilingües de | fr | en. Según nuestras estadísticas, podemos decir que las personas usan el interruptor de idioma en el sitio para mostrar su idioma preferido, pero esta opción rara vez coincide con la configuración regional preferida del navegador.

Si el entorno local del campo de calendario, etc. se realiza por el sistema operativo, esto nos lleva de nuevo a la desafortunada < entrada   type = archivo > situación en la que la etiqueta se lee Subir un archivo y el botón dice Parcourir. No puede hacer nada con respecto a esta combinación de idiomas y siempre me pareció una gran molestia.

Conclusión, tengo que sobrescribir el calendario predeterminado con jQuery uno para asegurarme de que hace lo que quiero.

En mi opinión, una API configurable o al menos una forma de manipular la configuración regional en un nivel de HTML sería genial. Dado que los nuevos tipos de campo aún no han sido ampliamente adoptados por los otros fabricantes de navegadores, imagino que este problema aún podría tenerse en cuenta.

Gracias por leer esto.

Answer 3

Para dispositivos móviles, la mejor solución que hemos encontrado es usar una entrada de texto para ingresar la fecha, con un icono de calendario al lado que tiene una entrada de fecha invisible sobre el ícono.

Ventajas:

• funciona en todos los navegadores y dispositivos
• puede usar el botón junto a la fecha en iOS (si varios campos)
• usuario puede escribir en la fecha (muy útil)
• evita Errores de IU de iOS (1. edición de datos existentes con fecha en blanco, siguiente fecha, valor de fecha establecido hoy - arrrgh, 2. teclado mostrando, siguiente fecha, muestra emergente y el teclado desaparece - ouch)
• usa una biblioteca de fechas para mostrar la fecha en la entrada como la localización configurada para la cuenta de usuario (no el navegador), y puede usar una biblioteca de fecha inteligente (escriba "mañana", etc.).
• icono de calendario clic para ver la fecha como la localización del navegador
• repliegue grácil incluso si input type=date no compatible con el dispositivo/navegador (por ejemplo, algunos dispositivos Android no son compatibles con fecha o tener errores graves).
• para escritorio (detectado mediante soporte técnico sin contacto) mostramos nuestro propio menú desplegable de fecha personalizada.

HTML es un algo como:

<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; 
}