79 votes

Appeler le sélecteur de date natif à partir d'une application Web sur iOS / Android

Je suis en train d'explorer les possibilités par la suite avec l'exécution d'un natif de l'application web sur différentes plates-formes à l'aide de HTML5. Actuellement, une <input type="date">champ ouvre simplement la norme du clavier virtuel sur Android et iOS. Je suppose que, dans l'avenir, l'OS mobile de claviers virtuels comprendra des sélecteurs de date et telle, comme <select> invoque le natif sélectionnez aujourd'hui.

Car ce n'est pas implémentée sur Android ou iOS, mais il est mis en œuvre dans natif de l'INTERFACE utilisateur, il est possible pour une application web pour invoquer le natif de sélecteur de date, c'est à dire lorsque l'on clique dessus?

Cela rendrait-il possible pour nous d'arrêter l'utilisation de bibliothèques JavaScript comme jQuery mobile et YUI.

Si ma question est de toute façon pas clair, s'il vous plaît dites-moi. Merci d'avance :-)

105voto

Arjan Points 7154

Aujourd'hui, certains dispositifs de soutien <input type="date"> , mais d'autres ne le font pas, il faut donc être prudent:

  • On peut détecter si type="date" est pris en charge par le paramètre d'attribut et de la lecture de sa valeur. Navigateurs/périphériques qui ne prennent pas en charge, il va ignorer le paramètre le type d' date et retour text lors de la lecture de cet attribut. Sinon, Modernizr peut être utilisé pour la détection. Attention, il ne suffit pas de vérifier certaines version; comme le Samsung Galaxy S2 sous Android 4.0.3 prend en charge type="date", mais le Google/Samsung Nexus S sur la plus récente d'Android 4.0.4 ne pas.

  • Lorsque le préréglage de la date pour le natif de sélecteur de date, assurez-vous d'utiliser un format que l'appareil reconnaît. Quand ne pas le faire, périphériques peuvent silencieusement de le rejeter, laissant un vide champ de saisie lorsque vous essayez d'afficher une valeur existante. Comme en utilisant le sélecteur de date sur un Galaxy S2 sous Android 4.0.3 peut lui-même définir le <input> de 2012-6-1 pour le 1er juin. Cependant, lors de la définition de la valeur à partir de JavaScript, il a besoin par des zéros: 2012-06-01.

  • Lors de l'utilisation de choses comme Cordova (PhoneGap) pour afficher le natif de sélecteur de date sur les appareils qui ne supportent pas l' type="date":

    • Assurez-vous de détecter correctement la prise en charge intégrée. Comme sur le Galaxy S2 sous Android 4.0.3, à tort, également à l'aide de Cordova Android plugin sera résultat en montrant le sélecteur de date deux fois de suite: une fois de plus, après avoir cliqué sur "set" dans sa première occurrence.

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

    • Sur iOS 4, onclick ou onfocus pour déclencher l'iOS plugin fait d'abord le clavier régulier de montrer, d'après lequel le sélecteur de date est placée sur le dessus de cela. Ensuite, après l'aide du sélecteur de date, on a encore besoin de fermer le clavier régulier. À l'aide de $(this).blur() pour supprimer le focus avant la date picker est montré aide pour iOS 4 et ne pas affecter d'autres appareils que j'ai testé. Mais il introduit un clignotement rapide du clavier sur iOS, et les choses peuvent être encore plus déroutant à la première utilisation alors que le sélecteur de date est plus lent. On peut désactiver complètement le clavier en faisant de l'entrée readonly si l'on utilise le plugin, mais qui désactive le "précédent" et "suivant" touches lorsque vous tapez dans les autres entrées sur le même écran. Il semble également que l'iOS 4 plugin ne pas faire le natif de sélecteur de date show "annuler" ou "clair", mais je suppose que c'est un iOS 4 chose.

    • Sur un iphone 4 iPad (le simulateur), le plugin Cordova ne semble pas rendu correctement, fondamentalement, ne pas donner à l'utilisateur une option permettant de saisir ou de modifier la date. (Peut-être iOS 4 n'a pas rendu son natif de sélecteur de date joliment sur le dessus d'un affichage web, ou peut-être ma vue web CSS du style a un certain effet, et il est sûr que cela peut être différent sur un périphérique réel: s'il vous plaît commentaire ou modifier!)

    • Bien que l'Android sélecteur de date plugin essaie d'utiliser le même JavaScript API que l'iOS plugin, et son exemple utilise allowOldDates, Android fait ne supporte pas cela. Aussi, il retourne la nouvelle date, 2012/7/2 alors que la version iOS retours Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

    • En aparté, lors de l'utilisation de la PhoneGap 1.5 Android plugin Cordova 1.6, puis dans le code Java remplacer final PhonegapActivity currentCtx = ctx; avec final Context currentCtx = ctx.getContext(); et dans le fichier JavaScript remplacer PhoneGap avec cordova. Notez également que GitHub rend parfois README.md mal; voir sa première version. L'iOS plugin est déjà mis à jour pour Cordoue.

  • Même lorsqu' <input type="date"> est pris en charge, les choses peuvent sembler malpropre:

    • iOS 5 montre bien 2012-06-01 localisé dans un format, comme 1 Jun. 2012 ou June 1, 2012 (et même les mises à jour immédiatement tout en continuant le sélecteur de date). Cependant, le Galaxy S2 sous Android 4.0.3 montre le laid 2012-6-1 ou 2012-06-01, peu importe le locale est utilisée.

    • iOS 5 sur iPad (simulateur) ne pas masquer le clavier lorsque cela est déjà visible au toucher et à la date d'entrée, ou lors de l'utilisation de "précédent" ou "suivant" dans une autre entrée. Ensuite, il révèle simultanément le sélecteur de date ci-dessous la saisie et le clavier en bas, et semble pour permettre à n'importe quelle entrée de deux. Cependant, bien qu'il n'changement visible de la valeur, de la saisie au clavier est en fait ignoré. (Affiché lors de la lecture de la valeur, ou lors de l'appel du sélecteur de date encore.) Lorsque le clavier n'était pas encore montré, puis de toucher la date d'entrée ne montre que le sélecteur de date, pas le clavier. (Cela peut être différent sur un périphérique réel, s'il vous plaît commentaire ou modifier!)

    • Les appareils peuvent afficher un curseur dans le champ de saisie, et une longue pression pourrait déclencher le presse-papiers options, éventuellement, montrant le clavier régulier. Lorsque vous cliquez, certains périphériques peuvent même afficher le clavier régulier pendant une fraction de seconde, avant de changer pour afficher le sélecteur de date.

14voto

Bot Points 7046

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.

5voto

Levi Kovacs Points 943

Essayez mobiscroll http://mobiscroll.com . Le sélecteur de date et 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.

5voto

Eirik Hoem Points 973

iOS5 a un support pour cela ( 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).

3voto

user2070775 Points 523

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X