11540 sujets

JavaScript, DOM et API Web HTML5

Datepicker pour mobile

Salut à tous,

Je post mon premier message pour avoir des retours sur les datepicker que l'on peut trouver pour mobile.

Je recherche quelque chose de pratique à l'utilisation et la solution que nous avons pour les écrans d'ordi n'est pas l'idéal sur mobile.

J'ai testé mobiscroll qui est très gourmand (il arrive à faire ramer mon mobile)...

input type="tel" n'est pas intuitif à l'utilisation (donnée de type JJ/MM/AAAA) les utilisateurs ne penseront pas à indiquer les / le trois quart du temps.

En attendant que vos âmes éclairées me répondent je vais fouiller les sites dédiés au surf sur mobile !

A+, SM.
Bonjour SuperMerguez (miam) Smiley langue
SuperMerguez a écrit :
input type=tel n'est pas intuitif à l'utilisation (donnée de type JJ/MM/AAAA) les utilisateurs ne penseront pas à indiquer les / le trois quart du temps.

Euh… oui et c'est logique que ce ne soit pas très intuitif car "tel" = numéro de téléphone, comme son nom l'indique plutôt bien Smiley ravi

Ici, il faudrait plutôt un input de type date (en HTML5, cf cet article sur Alsa), mais le support est pas encore génial.

Du coup il faudrait regarder du côté de l'utilisation de jQuery UI Datepicker avec jQuery Mobile pour obtenir quelque chose de plus intéropérable.
J'ai trouvé une première piste intéressante :
> jQuery UI's Datepicker styled for mobiles
Salut,

{boulet} ouai je me suis trompé de type et j'ai pas relu :X {/boulet}

Je vais me pencher sur la libraire jquery mobile, ça fait 1 nouvelle librairie à charger...

En fait l'idéal ça serait de masquer le pavé numérique dès que l'utilisateur appuie sur le champs en question, il me semble que ça peut se faire... ainsi le datepicker de base serait clairement utilisable.

Sans utiliser de UA sniffing est il possible de déterminer quel type de librairie à charger ?
Ou alors la super idée ça serait de faire un appendTo qui transformerait le input date en select avec la batterie de date disponible ou un truc comme ça... je ne sais pas si c'est envisageable mais ça me donne des idées ahah Smiley biggol
@Florian_R Merci beaucoup ! je viens de m'apercevoir que mordernizr est chargé sur le site en plus, je vais donc de ce pas essayer ceci !
Premier constat :

J'ai pris la procédure de test traditionnelle expliquée sur leur site... marrant que mes scripts ne se chargent pas :X

Alors soit je suis aussi doué qu'un concombre avec une truelle dans les mains soit il y a un conflit dans mon script : 

<script type="text/javascript" src="/librairies/html5/modernizr.custom.js"></script>
<script type="text/javascript" src="/librairies/html5/yepnope.js"></script>
<script type="text/javascript">
yepnope({
  test : Modernizr.inputtypes && Modernizr.inputtypes.date,
  nope : [
    '/librairies/jquery/plugins/ui/js/jquery-ui-1.8.14.custom.min.js',
    '/librairies/jquery-validation-1.9.0/jquery.validate.min.js',
    '/librairies/jquery/plugins/ui/css/jquery-ui-1.8.17.custom.css'
  ]
});
</script>


et je suis parti de ça : 

yepnope({
  test : Modernizr.inputtypes && Modernizr.inputtypes.date,
  nope : [
	'scripts/jquery.js', 
	'scripts/jquery-ui.js',
	'css/jquery-ui.css',
	'scripts/datepicker.js'
  ]
});


Note : jQuery-UI se charge bien sans yepnope donc je pense que cela peut venir du script en lui même...
Essaie de faire un console.log(Modernizr.inputtypes && Modernizr.inputtypes.date) juste avant l'appel à yepnope, pour vérifier ce que te renvoie le test de Modernizr.

Vérifie aussi que Yepnope n'est pas déjà inclus dans Modernizr (il y a une option pour ça quand tu fais un custom build).

Jquery est bien présent?

HS: Ça commence à faire beaucoup de JS pour un site orienté mobile. Peux être que se passer de calendrier et juste vérifier que le format est bien du type jj/mm/YYYY si le input[type=date] n'est pas supporté sera aussi efficace tout en étant plus performant.
La console me retourne un false

HS : C'est le client qui veut tout plein de bidule de partout... Smiley confused et je ne fais que suivre les ordres de ma direction technique
Modifié par SuperMerguez (17 Jul 2012 - 10:46)
Si ça te retourne false, au moins tu es sûr que ça ne vient pas de Modernizr.

Tu n'as aucune requête dans ton onglet réseau? Au passage, là tu essaies de charger jQueryUI, mais jamais tu ne l'instancies (c'est l’intérêt du scripts/datepicker.js dans le lien que je t'ai filé. Personnellement je ferais ça sur un callback plutôt que charger un fichier de 3 lignes).
Modifié par Florian_R (17 Jul 2012 - 10:58)
Voilà ce qui charge dans réseau :

GET less-1.2.1.min.js : 5ms
	
GET modernizr.custom.js : 5ms
	
GET jquery.min.js : 46ms
	
GET jquery-1.4.2.min.js : 6ms
	
GET jquery.showcase.2.0.js : 9ms
	
GET jquery.wslide.js : 9ms
	
GET jquery.lightbox.min.js : 10ms
	
GET jquery-ui-1.8.14.custom.min.js : 10ms
	
GET jquery.validate.min.js : 10ms
	
GET datepicker.js : 11ms
	
GET jquery-ui-1.8.14.custom.min.js : 2ms


Et j'ai toujours : 

jQuery.datepicker is undefined
Tu charges deux fois jQuery et deux fois jQueryUI. Vérifie bien que tu as bien le datepicker dans ton build de jQueryUI (erreur bête, ça m'est déjà arrivé).

Tu fais ton instanciation dans datepicker.js?
Il se charge 2 fois lorsque j'utilise yepnope... ahem !

EDIT :

le mystère du fichier introuvable jquery 1.4.2 qui charge alors qu'il n'est pas appelé...

Bon, t'embête pas trop avec ça, je vais laisser de côté et trouver une alternative moins gourmande en ressource...

Si jamais je réussi à trouver une méthode qui marche je viendrais la poster ici.

A+ merci de ton aide
Modifié par SuperMerguez (17 Jul 2012 - 11:51)
Sujet clos
Aller à