Je travaille sur un projet où il y a de nombreuses entrées de temps pour un enregistrement donné.
Les heures sont stockées dans la base de données sous forme d'horodatage, mais pour l'affichage et la modification, il est difficile d'afficher l'intégralité de l'horodatage, car les utilisateurs ne sont intéressés que par les heures: minutes (heure de la journée) et autorisés à modifier (ou créer) cette heure.
J'ai des problèmes à trouver un moyen convivial pour eux d'entrer ces heures (et dates). J'utilisais le sélecteur de date/heure jQuery avec une réponse des utilisateurs (ils n'aiment pas le curseur). Quoi qu'il en soit, j'essaie de trouver des idées pour l'améliorer.
J'ai créé une maquette minimale avec d'autres champs omis pour plus de clarté. Il est courant d'avoir 4 à 5 lignes de ces entrées de temps pour un enregistrement donné. L'horodatage complet est statique. Toutes les heures sont dans l'ordre chronologique. La plupart du temps, la date ne change pas, sauf si l'entrée se prolonge jusqu'au lendemain.
Ma question est la suivante: quelle devrait être la meilleure façon de saisir une date et une heure? Voici quelques idées auxquelles j'ai pensé:
Demandez à l'utilisateur d'entrer une heure et de déterminer la date en fonction de l'heure précédente.
Essayez un sélecteur de date/heure différent (bien que les utilisateurs préfèrent la saisie manuelle.)
La plupart des sélecteurs de date et d'heure offrent une expérience utilisateur terrible: ils nécessitent de cliquer et de faire défiler une grande quantité de dates et/ou d'heures non pertinentes. À moins que l'utilisateur n'ait besoin de garder une date par rapport à celles qui l'entourent sur un calendrier (par exemple lors de la planification des dates de voyage), la sélection des dates dans un format de calendrier n'ajoute aucune valeur.
Une alternative à l'utilisation de sélecteurs de date et d'heure pour utiliser n masque de saisie . Les masques de saisie permettent à l'utilisateur de saisir simplement la date et/ou l'heure en suivant le modèle défini. Plus de chasse et de picage.
jquery.inputmask est une solution JavaScript qui facilite l'utilisation des masques de saisie.
Je suggérerais d'avoir une zone de texte régulière où l'utilisateur peut taper une valeur et inclure une flèche déroulante qui se développe dans une vue plus visuelle de son choix.
Pour une vue visuelle, vous pouvez faire quelque chose de similaire à ce que fait l'application de réveil de Google:
Taper sur différentes parties de l'horloge règle l'heure à l'endroit où vous avez tapé, et taper sur les chiffres change l'horloge des heures en minutes.