javascript - pantalla - Invocar selector de fecha nativo desde la aplicación web en iOS/Android

mostrar sugerencia "añadir a pantalla de inicio"

Question

Estoy intentando explorar las posibilidades de ejecutar una aplicación web nativa en diferentes plataformas con HTML5. Actualmente, un campo <input type="date"> acaba de abrir el teclado virtual estándar en Android e iOS. Supongo que en el futuro los teclados suaves del sistema operativo móvil incluirán selectores de fecha y cosas similares, al igual que <select> invoca a la selección nativa hoy.

Dado que esto no está implementado 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?

Esto nos permitiría dejar de usar las bibliotecas de JavaScript como jQuery mobile y YUI.

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

Answer 1

Desde hace algunos años algunos dispositivos admiten <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:

• Se puede detectar si type="date" se admite configurando ese atributo y luego leyendo su valor. Los navegadores / dispositivos que no lo admitan ignorarán la configuración del tipo hasta la date y devolverán el text al leer ese atributo. Alternativamente, Modernizr puede usarse para la detección. Ten en cuenta que no es suficiente verificar alguna versión de Android; al igual que el Samsung Galaxy S2 en Android 4.0.3 admite type="date" , pero el Google / Samsung Nexus S en el más reciente Android 4.0.4 no lo hace.

• Al preajustar la fecha para el selector de fecha nativo, asegúrese de usar un formato que reconozca el dispositivo. Cuando no lo hace, los dispositivos pueden rechazarlo silenciosamente, dejando uno con un campo de entrada vacío cuando intenta mostrar un valor existente. Al igual que con el selector de fecha en un Galaxy S2 con Android 4.0.3, podría establecerse la <input> en 2012-6-1 para el 1 de junio. Sin embargo, al establecer el valor desde JavaScript, necesita ceros a la izquierda: 2012-06-01 .

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

  • Asegúrese de detectar adecuadamente el soporte integrado. Al igual que en 2012 en el Galaxy S2 con Android 4.0.3, erróneamente también el uso del complemento Cordova Android 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 desencadena el controlador onclick y, por lo tanto, le da al usuario una entrada regular. El uso de onfocus para activar el complemento parecía funcionar mejor.

  • En iOS 4, el uso de onclick o onfocus para activar el complemento iOS de 2012 primero hizo que se mostrara el teclado normal, después del cual el selector de fecha se colocó encima de eso. Luego, después de usar el selector de fecha, todavía se necesita 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 algunos flashes rápidos del teclado en iOS, y las cosas podrían ser aún más confusas en el primer uso ya que el selector de fecha fue más lento. Se podría deshabilitar por completo el teclado normal haciendo que la entrada sea de readonly si se usa el complemento, pero que se desactivan los botones "anterior" y "siguiente" al escribir en otras entradas en la misma pantalla. También parece que el complemento de iOS 4 no hizo que el selector nativo de fechas mostrara "cancelar" o "borrar", pero supongo que es algo de iOS 4 .

  • En un iOS 4 iPad (simulador), en 2012 el complemento de Cordova no parecía reproducirse correctamente, básicamente, no le daba al usuario ninguna opción para ingresar o cambiar una fecha. (Tal vez iOS 4 no muestra su selector de fecha nativo muy bien en la vista web, o tal vez el estilo CSS de mi vista web tiene algún efecto, y seguramente esto podría ser diferente en un dispositivo real: ¡por favor coméntelo o edítelo!)

  • Aunque, de nuevo en 2012, el plugin de selector de fecha de Android intentó usar la misma API de JavaScript que el complemento de iOS, y su ejemplo utilizó allowOldDates , la versión de Android en realidad no allowOldDates eso. Además, devolvió la nueva fecha como 2012/7/2 mientras que la versión de iOS devolvió el Mon Jul 02 2012 00:00:00 GMT+0200 (CEST) .

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

  • iOS 5 muestra muy bien el 2012-06-01 en un formato localizado, como el 1 Jun. 2012 o June 1, 2012 (e incluso las actualizaciones de inmediato, mientras aún funciona el selector de fecha). Sin embargo, el Galaxy S2 con Android 4.0.3 muestra el feo 2012-6-1 o 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 al usar "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 invoca el selector de fecha nuevamente.) Cuando aún no se mostró el teclado, tocar la entrada de fecha solo muestra el selector de fecha, no el teclado. (Esto podría ser diferente en un dispositivo real, por favor coméntelo o edítelo)

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

Answer 2

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

Answer 3

En sus elementos de formulario use input type="time" . Le ahorrará todas las molestias de tratar de usar una biblioteca de selector de datos.

Answer 4

Mi respuesta es demasiado simplista. Si desea escribir un código simple que funcione multiplataforma, utilice el método window.prompt para solicitar una fecha al usuario. Obviamente, necesita 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">

Answer 5

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

Answer 6

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 el uso del marco general (por lo tanto, no funcionará como una página web móvil regular).

Puedes ver capturas de pantalla anteriores y posteriores en esta publicación de blog: selector de fecha y hora

Answer 7

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

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

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

Answer 8

iOS5 tiene soporte para esto ( Reference ). Si desea invocar el selector de fecha nativo, puede tener una opción con PhoneGap (no lo he probado yo mismo).