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

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 :-)

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.

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.

iOS5 tiene soporte para esto ( Referencia ). Si desea invocar el selector de fecha nativo, es posible que tenga una opción con PhoneGap (no lo he probado yo mismo).

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.

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">

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

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

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