Invocar el selector de fechas nativo desde la aplicación web en iOS / Android

79

Estoy tratando de explorar las posibilidades de ejecutar una aplicación web nativa en diferentes plataformas usando HTML5. Actualmente, un <input type="date">campo simplemente abre el teclado en pantalla estándar en Android e iOS. Supongo que en el futuro, los teclados de software del sistema operativo móvil incluirán selectores de fecha y demás, al igual que <select>invoca la selección nativa hoy.

Dado que esto no se implementa en Android o iOS, pero se implementa en la interfaz de usuario nativa, ¿es posible que una aplicación web invoque el selector de fecha nativo, es decir, cuando se hace clic en él?

Esto nos haría posible dejar de usar bibliotecas de JavaScript como jQuery mobile y YUI.

Si mi pregunta no está clara de alguna manera, por favor dígame. Gracias de antemano :-)

javascript  iphone  android  ios  html 
— hnilsen
fuente
— Daniel Trebbien
Descubrí que la forma más fácil sería usar input[type=text]y luego ng-clickabrir el selector de fechas nativo usando javascript.
— Siddharth
1
@Siddharth Esa es una sugerencia decente ... por alguna razón en Android 7, el tipo de entrada = fecha muestra un selector totalmente diferente al selector de fecha nativo (por ejemplo, no puede desplazarse con el dedo). Por cierto, ¿cómo se abre el selector de fechas "nativo" en javascript?
— Michael

Respuestas:

105

Desde algunos años, algunos dispositivos son compatibles <input type="date">pero otros no, por lo que hay que tener cuidado. Aquí hay algunas observaciones de 2012, que aún podrían ser válidas hoy:

  • Uno puede detectar si type="date"es compatible estableciendo ese atributo y luego leyendo su valor. Los navegadores / dispositivos que no lo admitan ignorarán la configuración del tipo datey regresarán textal leer ese atributo. Alternativamente, Modernizr se puede utilizar para la detección. Tenga en cuenta que no es suficiente buscar alguna versión de Android; como el Samsung Galaxy S2 en Android 4.0.3 es compatible type="date", pero el Google / Samsung Nexus S en el más reciente Android 4.0.4 no lo es .

  • Al preajustar la fecha para el selector de fecha nativo, asegúrese de utilizar un formato que reconozca el dispositivo. Cuando no se hace eso, los dispositivos pueden rechazarlo en silencio, dejando uno con un campo de entrada vacío al intentar mostrar un valor existente. Al igual que con el selector de fecha en un Galaxy S2 con Android 4.0.3 fuerzas se fijó como <input>a 2012-6-1para junio 1er. Sin embargo, al establecer el valor de JavaScript, que necesita ceros principales: 2012-06-01.

  • Al usar cosas como Cordova (PhoneGap) para mostrar el selector de fecha nativo en dispositivos que no son compatibles type="date":

    • Asegúrese de detectar correctamente el soporte integrado. Al igual que en 2012 en el Galaxy S2 con Android 4.0.3, el uso erróneo del complemento de Android Cordova también resultaría en mostrar el selector de fecha dos veces seguidas: una vez más después de hacer clic en "establecer" en su primera aparición.

    • Cuando hay varias entradas en la misma página, algunos dispositivos muestran "anterior" y "siguiente" para acceder a otro campo de formulario. En iOS 4, esto no activa el onclickcontrolador y, por lo tanto, le da al usuario una entrada regular. Usar onfocuspara activar el complemento pareció funcionar mejor.

    • En iOS 4, usar onclicko onfocuspara activar el complemento de iOS de 2012 primero hizo que se mostrara el teclado normal, después de lo cual el selector de fecha se colocó encima. A continuación, después de usar el selector de fecha, aún era necesario cerrar el teclado normal. Usar $(this).blur()para quitar el foco antes de que se mostrara el selector de fecha ayudó para iOS 4 y no afectó a otros dispositivos que probé. Pero introdujo un parpadeo rápido del teclado en iOS, y las cosas podrían ser aún más confusas en el primer uso, ya que luego el selector de fecha era más lento. Uno podría deshabilitar completamente el teclado normal haciendo la entrada readonlysi uno estuviera usando el complemento, pero eso deshabilitó los botones "anterior" y "siguiente" al escribir otras entradas en la misma pantalla. También parece que el complemento de iOS 4 no hizo que el selector de fecha nativo mostrara "cancelar"

    • En un iPad (simulador) con iOS 4, en 2012, el complemento Cordova no parecía renderizarse correctamente, básicamente no le daba al usuario ninguna opción para ingresar o cambiar una fecha. (Tal vez iOS 4 no muestre bien su selector de fecha nativo en la parte superior de una vista web, o tal vez el estilo CSS de mi vista web tenga algún efecto, y seguramente esto podría ser diferente en un dispositivo real: ¡comente o edite!)

    • Aunque, nuevamente en 2012, el complemento de selector de fecha de Android intentó usar la misma API de JavaScript que el complemento de iOS, y se usó su ejemplo allowOldDates, la versión de Android en realidad no lo admitía. Además, devolvió la nueva fecha 2012/7/2mientras que la versión de iOS regresó Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

  • Incluso cuando <input type="date">es compatible, las cosas pueden verse desordenadas:

    • iOS 5 se muestra muy bien 2012-06-01en un formato localizado, como 1 Jun. 2012o June 1, 2012(e incluso lo actualiza de inmediato mientras sigue operando el selector de fecha). Sin embargo, el Galaxy S2 con Android 4.0.3 muestra lo feo 2012-6-1o 2012-06-01, sin importar qué configuración regional se use.

    • iOS 5 en un iPad (simulador) no oculta el teclado cuando ya está visible al tocar la entrada de fecha, o cuando se usa "anterior" o "siguiente" en otra entrada. Luego muestra simultáneamente el selector de fecha debajo de la entrada y el teclado en la parte inferior, y parece permitir cualquier entrada de ambos. Sin embargo, aunque cambia el valor visible, la entrada del teclado se ignora. (Se muestra cuando se vuelve a leer el valor o cuando se vuelve a invocar el selector de fecha). Cuando aún no se muestra el teclado, al tocar la entrada de fecha solo se muestra el selector de fecha, no el teclado. (Esto puede ser diferente en un dispositivo real, ¡comente o edite!)

    • Los dispositivos pueden mostrar un cursor en el campo de entrada y una pulsación larga puede activar las opciones del portapapeles, posiblemente mostrando también el teclado normal. Al hacer clic, algunos dispositivos pueden incluso mostrar el teclado normal durante una fracción de segundo, antes de cambiar para mostrar el selector de fecha.

— Arjan
fuente
¿Puede confirmar que el complemento realmente activa el control nativo (en lugar de generar una emulación JS del control nativo)?
— DA.
Bueno, la pregunta original es sobre hacerlo en el propio navegador web. Sin embargo, su respuesta entra en el territorio de PhoneGap y las 'trampas' parecen implicar que tal vez PhoneGap no estaba activando el control nativo, sino que estaba usando JavaScript para imitar el control nativo. Pero, si entiendo su respuesta, el complemento PhoneGap está, de hecho, activando el selector de fecha del sistema operativo del dispositivo nativo fuera del safari móvil.
— DA.
Todavía estoy un poco confundido acerca de lo que está activando el complemento PhoneGap. Por ejemplo, afirma que el iPad tiene problemas de renderizado. ¿Por qué representaría incorrectamente el control nativo? (También revisaré mis preguntas anteriores ...)
— DA.
Desafortunadamente, no sé por qué el iPad (simulador) no muestra su propio selector de fecha nativo cuando se activa desde el complemento. Tal vez algo en el código del complemento Objective C esté mal, o tal vez de alguna manera mostrar el selector de fechas en la parte superior de una vista web sea problemático, o tal vez sea incluso el estilo CSS de la página web que uso lo que de alguna manera lo afecta (aunque no debería ). Pero todo se trata de los recolectores de fechas nativos; eche un vistazo a Java , es bastante pequeño.
— Arjan
1
Una advertencia: en iOS, el evento 'onchange' se activa cuando cambia solo uno de los 3 controles para día / mes / año. Esto es prematuro, ya que el usuario podría cambiar más de uno y luego tocar "Listo" para confirmar la nueva fecha. En su lugar, tuve que usar el evento 'onblur'.
— EoghanM
14

iOS 5 ahora es mejor compatible con HTML5. en tu webapp haz

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

Android a partir de 4.0 carece de este tipo de soporte de menú nativo.

— Larva del moscardón
fuente
3
Tu respuesta es tan correcta como la de Eirik Hoem. Android 4.0 todavía no es compatible, esto es un desastre. ¡Qué vergüenza, Google!
— hnilsen
Hoy en día, Android 4.0.3 en el Samsung Galaxy S2 es compatible con esto, pero 4.0.4 en el Nexus S no, @hnilsen.
— Arjan
Er, no: no estoy diciendo que Android 4.0.3 lo admita, pero: Android 4.0.3 en el Galaxy S2 lo hace ...
— Arjan
Estoy usando esto para Android en la aplicación iónica. Funciona bien, pero hago que esta entrada esté oculta y active el evento de clic cuando el usuario hace clic en div, por lo que no funciona. ¿alguna idea?
— Jay Shukla
5

Prueba Mobiscroll . El selector de fecha y hora con estilo de desplazamiento se creó especialmente para la interacción en dispositivos táctiles. Es bastante flexible y fácilmente personalizable. Viene con temas de iOS / Android.

— Levi Kovacs
fuente
2
Hm, esto es básicamente lo contrario de lo que usaría. No es rápido, no es fácil de mantener y no se parece a nada más que a iOS, Android y Sense predeterminados. Sin embargo, gracias por su contribución :-)
— hnilsen
Me parece que mobiscroll tiene muchos errores y no es confiable en el navegador nativo de HTC Desire. En el mejor de los casos, parece lento, pero con frecuencia el desplazamiento se atasca, por lo que pasa por las fechas continuamente.
— Leo
Funciona mucho mejor en iOS. Sin embargo ... lo estoy usando en HTC Desire HD, y el 2.0 parece mejorado. Y parece funcionar incluso mejor en otros navegadores de Android, como Dolphin, por ejemplo.
— Levi Kovacs
Tenga en cuenta que WP7 no es compatible con mobiscroll y este ticket de error ha estado abierto durante más de un año: code.google.com/p/mobiscroll/issues/…
— Parker Ault
¿Dónde está el soporte de Windows Phone? Ver publicación: blog.mobiscroll.com/where-is-the-windows-phone-support
— Levi Kovacs
3

Mi respuesta es demasiado simplista. Si desea escribir un código simple que funcione en varias plataformas, utilice el método window.prompt para pedirle al usuario una fecha. Obviamente, debe validar con una expresión regular y luego crear el objeto de fecha.

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

En tu HTML:

<input type="text" onclick="onInputClick(this)" value="2014-01-01">
— oabarca
fuente
Agradable. Pero consulte también Detectar una instancia de fecha de "fecha no válida" en JavaScript . (Podría intentar hacer que la expresión regular sea un poco mejor, como no aceptar meses> 12, pero el día máximo aún sería difícil).
— Arjan
1

Puede usar el módulo de interfaz de usuario de Trigger.io para usar el selector de fecha / hora nativo de Android con una entrada HTML5 normal. Sin embargo, hacer eso requiere usar el marco general (por lo que no funcionará como una página web móvil normal).

Puede ver capturas de pantalla antes y después en esta publicación de blog: selector de fecha y hora

— Amir Nathoo
fuente
0

En HTML:

  <form id="my_form"><input id="my_field" type="date" /></form>

En JavaScript

   // test and transform if needed
    if($('#my_field').attr('type') === 'text'){
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  
    };

    // check
    if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){
        $('#my_field').removeClass('bad');
    } else {
        $('#my_field').addClass('bad');
    };
Expandir fragmento

— Mauro
fuente
-6

En su formulario utilice elementos input type="time". Le ahorrará toda la molestia de intentar utilizar una biblioteca de selector de datos.

— Jeff K
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.