web-dev-qa-db-fra.com

Appeler le sélecteur de date natif depuis une application Web sur iOS / Android

J'essaie d'explorer les possibilités d'utiliser une application Web native sur différentes plates-formes à l'aide de HTML5. Actuellement, un <input type="date">field ouvre simplement le clavier logiciel standard sur Android et iOS. Je suppose qu’à l'avenir, les claviers logiciels du système d'exploitation mobile incluront des sélecteurs de date et autres, comme <select> appelle la sélection native aujourd'hui.

Puisque ceci n'est pas implémenté sur Android ou iOS, mais est implémenté dans une interface utilisateur native, est-il possible pour une application Web d'appeler le sélecteur de date natif, c'est-à-dire lorsque l'utilisateur clique dessus?

Cela nous permettrait d’arrêter d’utiliser des bibliothèques JavaScript telles que jQuery mobile et YUI.

Si ma question manque de clarté, merci de me le dire. Merci d'avance :-)

javascriptiphoneandroidioshtml5
77
hnilsen

Depuis quelques années, certains appareils prennent en charge <input type="date">, mais d'autres non, il faut donc faire attention. Voici quelques observations de 2012, qui pourraient encore être valables aujourd'hui:

  • On peut détecter si type="date" est pris en charge en définissant cet attribut puis en relisant sa valeur. Les navigateurs/périphériques qui ne le prennent pas en charge ignoreront la définition du type sur date et renverront text lors de la lecture de cet attribut. Alternativement, Modernizr peut être utilisé pour la détection. Attention, il ne suffit pas de vérifier certaines versions Android; comme le Samsung Galaxy S2 sur Android 4.0.3 prend en charge type="date", _ mais le Google/Samsung Nexus S sur le plus récent Android 4.0.4 fait pas .

  • Lors de la présélection de la date pour le sélecteur de date natif, veillez à utiliser un format reconnu par le périphérique. Lorsque vous ne le faites pas, les périphériques peuvent le rejeter en silence, en laissant un avec un champ de saisie vide lorsque vous essayez d'afficher une valeur existante. Comme utiliser le sélecteur de date sur un Galaxy S2 exécutant Android 4.0.3 pourrait lui-même définir le <input> sur 2012-6-1 pour le 1er juin. Toutefois, lors du réglage la valeur de JavaScript, il faut des zéros au début: 2012-06-01.

  • Lorsque vous utilisez des outils tels que Cordova (PhoneGap) pour afficher le sélecteur de date natif sur des périphériques ne prenant pas en charge type="date":

    • Assurez-vous de bien détecter le support intégré. Comme en 2012 sur le Galaxy S2 fonctionnant Android 4.0.3, à tort également avec le logiciel Cordova Android aurait pour effet d'afficher le sélecteur de date deux fois de suite: une fois de plus après avoir cliqué sur "set" lors de sa première occurrence.

    • Lorsqu'il y a plusieurs entrées sur la même page, certains périphériques affichent "précédent" et "suivant" pour entrer dans un autre champ de formulaire. Sur iOS 4, cela ne déclenche pas le gestionnaire onclick et donne donc à l'utilisateur une entrée régulière. Utiliser onfocus pour déclencher le plugin semblait mieux fonctionner.

    • Sur iOS 4, l’utilisation de onclick ou onfocus pour déclencher le plug-in iOS 2012 a été créée pour la première fois au clavier, après quoi le sélecteur de date a été placé au-dessus. Ensuite, après avoir utilisé le sélecteur de date, il restait encore à fermer le clavier normal. L'utilisation de $(this).blur() pour supprimer le focus avant l'affichage du sélecteur de date a été utile pour iOS 4 et n'a pas d'incidence sur les autres périphériques que j'ai testés. Mais cela a introduit quelques clignotements rapides du clavier sur iOS, et les choses pourraient être encore plus confuses lors de la première utilisation, car le sélecteur de date était alors plus lent. On pourrait complètement désactiver le clavier normal en faisant l’entrée readonly si on utilisait le plugin, mais cela désactivait les boutons "précédent" et "suivant" lors de la saisie d’autres entrées sur le même écran. Il semble également que le plug-in iOS 4 ne rende pas le sélecteur de date natif afficher "annuler" ou "effacer".

    • Sur un iPad iOS 4 (simulateur), en 2012, le plug-in Cordova semblait ne pas être restitué correctement, ne donnant en gros à l'utilisateur aucune possibilité d'entrer ou de modifier une date. (Peut-être qu'iOS 4 ne rend pas son sélecteur de date natif bien au-dessus d'une vue Web, ou peut-être que le style CSS de ma vue Web a un certain effet, ce qui pourrait sûrement être différent sur un appareil réel : veuillez commenter ou modifier!)

    • Cependant, toujours en 2012, le Android a essayé d'utiliser la même API JavaScript que le plug-in iOS, et son exemple a utilisé allowOldDates, le Android ne supportait pas cela. De plus, elle a renvoyé la nouvelle date sous la forme 2012/7/2 alors que la version iOS renvoyait Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

  • Même lorsque <input type="date"> est pris en charge, les choses peuvent paraître compliquées:

    • iOS 5 affiche joliment 2012-06-01 dans un format localisé, tel que 1 Jun. 2012 ou June 1, 2012 (et met même à jour immédiatement tout en utilisant le sélecteur de date). Cependant, le Galaxy S2 sous Android 4.0.3 montre le laid 2012-6-1 ou 2012-06-01, quelle que soit la langue utilisée.

    • iOS 5 sur iPad (simulateur) ne masque pas le clavier lorsque celui-ci est déjà visible lorsque vous appuyez sur la saisie de la date ou lorsque vous utilisez "précédent" ou "suivant" dans une autre entrée. Il affiche ensuite simultanément le sélecteur de date sous l'entrée et le clavier en bas, et semble pour permettre n'importe quelle entrée des deux. Cependant, bien que la valeur visible soit modifiée, la saisie au clavier est en réalité ignorée. (Affiché lors de la relecture de la valeur ou lors du rappel du sélecteur de date.) Lorsque le clavier n'était pas encore affiché, appuyez sur l'entrée de date pour afficher uniquement le sélecteur de date, pas le clavier. (Cela peut être différent sur un appareil réel, veuillez commenter ou modifier!)

    • Les périphériques peuvent afficher un curseur dans le champ de saisie et une pression longue peut déclencher les options du Presse-papiers, en affichant éventuellement le clavier standard. En cliquant, certains périphériques peuvent même afficher le clavier standard pendant une fraction de seconde, avant de modifier l'affichage du sélecteur de date.

104
Arjan

iOS 5 prend désormais mieux en charge HTML5. dans votre webapp faire

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

Android à partir de la version 4.0 manque de ce type de support de menu natif.

14
Bot

iOS5 prend en charge cette fonctionnalité ( Référence ). Si vous souhaitez invoquer le sélecteur de date natif, vous avez peut-être une option avec PhoneGap (je ne l’ai pas testée moi-même).

5
Eirik Hoem

Donnez Mobiscroll un essai. Le sélecteur de date et d'heure de style de défilement a été spécialement créé pour les interactions sur les appareils tactiles. C'est assez flexible et facilement personnalisable. Il est livré avec des thèmes iOS/Android.

5
Levi Kovacs

Ma réponse est trop simpliste. Si vous aimez écrire du code simple qui fonctionne sur plusieurs plates-formes, utilisez la méthode window.Prompt pour demander à l'utilisateur une date. De toute évidence, vous devez valider avec une expression rationnelle, puis créer l'objet de date.

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 vous HTML:

<input type="text" onclick="onInputClick(this)" value="2014-01-01">
3
oabarca

Vous pouvez utiliser le module = interface utilisateur de Trigger.io pour utiliser le sélecteur de date/heure natif Android avec une entrée HTML5 normale. Cela nécessite toutefois de ne fonctionnera pas comme une page Web mobile ordinaire).

Vous pouvez voir les captures d’écran avant et après dans cet article de blog: sélecteur de date/heure

1
Amir Nathoo

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
Mauro