Sélection de l'heure sans curseur.
J'utilise le sélecteur de date/heure par défaut avec Rails. Je me concentre principalement sur l'aspect temporel de cela, car pour mes besoins, la journée ne changera que rarement. Je cherche un moyen de rendre la sélection d'un moment un peu plus élégante. J'aimerais éviter les curseurs si possible. Toute suggestion sera appréciée.
Si vous êtes spécifiquement intéressé par un sélecteur de temps, l'implémentation de Maxime Haineault semble bonne. Il minimise la procédure de sélection de temps en un seul clic.
Bien que je me sente personnellement très à l'aise si je peux saisir directement la valeur. En gardant cela à l'esprit, il existe un projet datejs intéressant qui accepte assez confortablement les entrées naturelles.
Vous pouvez également suivre ces SO discussions sur ce sujet: https://stackoverflow.com/questions/1245245/jquery-date-time-picker et https://stackoverflow.com/questions/476822/jquery-time-picker
J'ai rencontré le même besoin aujourd'hui et j'ai trouvé le widget DateTimePicker de KendoUI qui apporte une bonne inspiration.
Il combine un sélecteur de date et un sélecteur d'heure dans le même champ: ils sont accessibles via des icônes, et le sélecteur de date est affiché au-dessus du champ tandis que le sélecteur d'heure est affiché en dessous.
Les pièces du sélecteur de date et d'heure ressemblent à ceci:
MODIFIER:
Poursuivant mes recherches sur le sujet, j'ai trouvé d'autres approches possibles comme le WPF DateTimePicker de Telerik et le bibliothèque javascript Mobiscroll (en particulier le timepicker inspiré par Windows) Téléphone UI ).
L'une des approches les plus innovantes est cette proposition de Dave Cortright :
J'aime plutôt l'approche adoptée par l'application Calendriers (disponible sur iOS). Par défaut, il affiche cette vue (se concentrer sur les parties inférieures des captures d'écran):
Il ne permet pas une précision d'une minute. Cependant, pour beaucoup d'applications, j'imagine que cela est acceptable. J'aime plutôt la répartition du temps qui a été choisie. Plutôt que les plages AM/PM, la barre supérieure contient les heures diurnes et la barre inférieure contient les heures nocturnes. Le seul résultat étrange de cela est le placement de 0:00 à 07:00. Il est juste après la plage de 20h00 à 23h00, mais il représente le temps qui le précède. Je suppose qu'une variation à trois barres (avec des parties vides dedans) serait plus claire, mais pas aussi visuellement attrayante.
En cliquant sur le bouton Date (ou sur le bouton Toute la journée), la vue change comme suit:
C'est bien sûr le tout dans une application iOS, pas un site Web. Mais vous pourriez utiliser une approche similaire en ligne, je pense.
Je suggérerais une combinaison du calendrier déroulant habituel et permettant aux utilisateurs de saisir l'heure eux-mêmes, avec un repli sur les listes déroulantes pour les appareils mobiles si vous avez besoin de les adapter. Il existe de nombreux calendriers déroulants, comme le jQuery UI Datepicker , que vous pouvez insérer directement. Les bons sont agréables et conviviaux, et se dégradent également avec élégance.
Quant à l'heure, bien sûr, une seule zone de texte simple ferait l'affaire, je pense. Une alternative plus sophistiquée serait d'avoir une boîte combinée, voici un exemple rapide .
Beaucoup de réponses intéressantes et nouvelles ici, mais je pense que vous pouvez résoudre votre problème avec quelque chose de plus simple.
Certains services bien connus utilisent une combinaison de saisie de texte/liste déroulante pour l'heure - et une saisie de texte/sélecteur d'agenda similaire pour le Date.
Cela permet aux utilisateurs de choisir parmi une liste d'options (rapide pour les utilisateurs de souris, faible précision) ou de taper une valeur exacte (précision plus élevée, plus rapide pour les utilisateurs de clavier).
Plus important encore, vos utilisateurs seront probablement familiarisés avec ce modèle :) Rappelez-vous, ne les faites pas réfléchir !
Calendrier Google:
Zipcar:
