Pregunta Invocar selector de fecha nativo desde la aplicación web en iOS / Android


Estoy intentando explorar las posibilidades de ejecutar una aplicación web nativa en diferentes plataformas con HTML5. Actualmente, un <input type="date">campo solo abre el teclado suave 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 demás, al igual que <select> invoca a 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?

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


76
2018-02-09 15:29


origen


Respuestas:


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

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

  • 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 que ejecuta Android 4.0.3 podría configurar el <input> a 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 fecha nativo en dispositivos que no son compatibles 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 además El uso del complemento Cordova para Android daría como resultado 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 onclick controlador y por lo tanto le da al usuario una entrada regular. Utilizando onfocus para activar el complemento parecía funcionar mejor.

    • En iOS 4, usando onclick o onfocus para activar el complemento de iOS de 2012, primero apareció 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. Utilizando $(this).blur() para eliminar el foco antes de que se mostrara el selector de fecha, ayudó a 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. Uno podría deshabilitar completamente el teclado normal haciendo la entrada readonlysi uno estaba usando el complemento, pero que deshabilitó los botones "anterior" y "siguiente" al escribir en otras entradas en la misma pantalla. También parece que el complemento iOS 4 no hizo que el selector nativo de fechas muestre "cancelar" o "borrar", pero Supongo que es una cosa 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!)

    • Sin embargo, nuevamente en 2012, el plugin 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 fue compatible. Además, devolvió la nueva fecha como 2012/7/2 mientras 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 parecer desordenadas:

    • iOS 5 muestra muy bien 2012-06-01 en un formato localizado, como 1 Jun. 2012 o June 1, 2012 (e incluso las actualiza de inmediato mientras aún funciona el selector de fecha). Sin embargo, el Galaxy S2 con Android 4.0.3 muestra lo feo 2012-6-1 o 2012-06-01, no importa qué locale 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. A continuación, muestra simultáneamente el selector de fecha debajo de la entrada y el teclado en la parte inferior, y parece para 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.


104
2018-06-01 20:58



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.


14
2017-11-15 21:14



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


5
2017-08-12 11:34



Dar Mobiscroll un intento. 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.


5
2017-09-07 09:43



Mi respuesta es demasiado simplista. Si te gusta escribir código simple que funciona multiplataforma, utiliza el window.prompt método para pedirle al usuario una fecha. 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">

3
2017-07-19 00:25



Podrías usar UI de Trigger.io módulo 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


1
2017-11-16 19:10



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


0
2017-08-12 12:32



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


-6
2017-08-08 22:48