Qu'est-ce qu'un bon sélecteur de temps Javascript? [fermé]

86

Qu'est-ce qu'un bon sélecteur de temps pour jquery ou js autonome? Je voudrais quelque chose comme Google utilise dans son calendrier où il contient une liste déroulante des heures communes à intervalles de 15 minutes ou vous permet de taper manuellement une heure et de la valider.

javascript jquery time input Element
la source
Un sélecteur de temps très simple avec bouton de rotation ici
om39a
13
Je recommande de rouvrir la question. Il est important de reconnaître que la catégorie `` non constructive '', comme chaque catégorie, devrait avoir des exceptions - je pense, y compris pour des questions comme celle-ci, où la réponse nécessite des connaissances en programmation et ne peut pas être facilement recherchée.
Dan Nissenbaum

Réponses:

74

Quelques ressources:

Christian C. Salvadó
la source
56
... et pas un spectateur parmi eux
Rudu
3
Le TimeDatePicker est probablement le meilleur.
JD Stuart
9
Je ne vois pas vraiment en quoi TimeDatePicker est une amélioration par rapport à une liste de sélection.
Jon z
3
la plupart des bibliothèques cassées
FooBar
6
Celui-ci est bien meilleur: weareoutman.github.io/clockpicker
Stefan Steiger
26

C'est le meilleur que j'ai trouvé jusqu'à la date http://trentrichardson.com/examples/timepicker/

Félix
la source
2
Selon l'application, c'est aussi l'un de mes favoris. J'ai eu besoin de changer la période de pas de minute de 1 à 15, mais c'était très facile.
Chris Dutrow
mon préféré de la liste. c'est facile, simple et ce dont il a besoin. J'ai déjà utilisé le widget Calendrier AJAX Any + Time ™ Datepicker / Timepicker, mais je vais plutôt essayer.
Daniel
Le site Web (et l'exemple javascript) ne sont plus disponibles. Y en a-t-il un échantillon ailleurs?
James Moberg
2
Les curseurs ne sont pas exactement le moyen le plus simple ou le plus rapide de sélectionner une heure précise.
mpen
@Mark Je suis d'accord avec votre opinion, le moyen le plus simple peut être soit une liste de sélection, soit l'affichage d'un pavé de calcul pour que l'utilisateur puisse taper.
Felix
8

Je n'étais satisfait d'aucun des sélecteurs de temps suggérés, j'ai donc créé le mien en m'inspirant de Perifer et de la spécification HTML5:

http://github.com/gregersrygg/jquery.timeInput

Vous pouvez soit utiliser les nouveaux attributs html5 pour la saisie du temps (step, min, max), soit utiliser un objet options:

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />

<script type="text/javascript">
    $("input[name='myTime']").timeInput(); // use default or html5 attributes
    $("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>

Valide l'entrée comme ceci:

  • Insérer ":" s'il manque
  • Pas d'heure valide? Remplacer par du blanc
  • Pas une heure valide selon l'étape? Arrondir au pas le plus proche

La spécification HTML5 n'autorise pas la syntaxe am / pm ou d'heure localisée, elle n'autorise donc que le format hh: mm. Les secondes sont autorisées selon les spécifications, mais je ne l'ai pas encore implémenté.

C'est très "alpha", donc il peut y avoir des bugs. N'hésitez pas à m'envoyer des patchs / pull requests. Avoir testé manuellement dans IE 6 & 8, FF, Chrome et Opera (dernière stable sur Linux pour ces derniers).

grégeurs
la source
1
Avez-vous une démo disponible?
mpen
Non désolé. Je n'ai pas touché à ce projet depuis 4 ans. N'hésitez pas à envoyer des pull-
requests
6

Vous pouvez lire l'article du créateur de jQuery John Resig à ce sujet ici: http://ejohn.org/blog/picking-time/ .

Sophie Alpert
la source
4
Prend beaucoup trop de précision de la souris pour l'utilisateur moyen. Ce n'est pas non plus immédiatement comment utiliser cette chose (bien qu'il prétende que c'est "intuitif") - je ne peux pas le regarder et savoir comment il se comportera lorsque je passerai la souris sur ces chiffres.
mpen
4

J'utilise ClockPick .

Tvanfosson
la source
Pas mal, mais le positionnement de l'élément est désactivé.
mpen
cela m'a conduit à une page louche demandant de mettre à jour le flash. Veuillez vérifier le lien et mettre à jour.
lets0code
3

CSS Gallery propose une variété de sélecteurs de temps. Regarde.

Le sélecteur de temps de Perifer Design est similaire à celui de Google

Alagu
la source
1
Ah Perifer est exactement ce que je recherche, mais il ne semble pas faire de validation, c'est-à-dire qu'il me permet de taper "999999999" comme valeur
Élément
3

Au cas où quelqu'un serait intéressé par un autre JavaScript TimPicker, j'ai développé et maintiens un plugin jQuery qui fait le travail. Cela fonctionne quelque chose comme EZ Time JS (même si je ne le savais pas avant il y a 5 minutes: D), permettant aux utilisateurs de saisir l'heure de presque toutes les manières avec lesquelles ils se sentent à l'aise et de convertir l'entrée dans un format commun.

Extrayez le Page jQuery TimePicker options pour le voir en action.

Willington Vega
la source
La démo est cassée (ou je n'ai pas compris comment l'utiliser!).
PhiLho
1

Désolé les gars ... c'est peut-être un peu tard ... J'utilise NoGray ... c'est cool ...


la source
4
Il n'est jamais trop tard pour que quelqu'un (pas nécessairement l'affiche originale) la trouve utile. .. ... sauf que NoGray est déjà mentionné par CMS ...
awe
1

J'utilise jquery ui timepicker

pryabov
la source
Trop buggy. Le navigateur plante lorsqu'il y a environ 10 à 20 contrôles.
Nick Binnet
-1

NoGray est un bonbon pour les yeux, mais il y a quelques considérations d'utilisabilité. Premièrement, les horloges analogiques deviennent de plus en plus obscures et les jeunes ont parfois du mal à les lire. Deuxièmement, faire glisser la souris vers une heure spécifique est un peu fastidieux, tout comme les sélecteurs de temps qui utilisent un curseur. Troisièmement, l'interaction du clavier pour ce sélecteur est un peu sporadique.

Pour un sélecteur de temps plus utilisable, consultez le widget Calendrier Any + Time ™ Datepicker / Timepicker AJAX . C'est peut-être le sélecteur de temps le plus rapide et le plus facile à utiliser, car il utilise de simples boutons pour sélectionner des heures spécifiques avec rapidité et facilité.

Un test intéressant de convivialité est le suivant: choisissez une heure étrange (par exemple, 22 h 32), puis voyez combien de temps il faut pour sélectionner avec précision cette heure à l'aide de divers sélecteurs de temps. Vous pouvez probablement le faire plus rapidement avec Any + Time ™ que vous ne pourriez écrire l'heure à la main - essayez simplement de trouver un autre sélecteur dont vous pouvez dire cela! Sans oublier, Any + Time ™ prend en charge une multitude de formats de date / heure, une horloge 12/24 heures, une personnalisation CSS complète (ou jQuery UI) et même des fuseaux horaires!

Andrew M. Andrews III
la source
Nice picker. Gratuit pour un usage non commercial, mais vous devez contacter le développeur au sujet des coûts de licence pour les projets commerciaux.
Andrew Lewis
6
Il se trouve qu'il est le développeur ...
steve_c
Il n'est pas nécessaire de sélectionner séparément les 10 et les 1 pour les minutes; vous n'avez presque jamais besoin de cette précision. Combinez les 10 et les 1 et faites 12 rangées par incréments de 5 minutes. Il s'alignera mieux avec les heures, sera plus rapide et sera suffisant pour la plupart des cas d'utilisation. Vous pouvez également envisager de changer le curseur en main / pointeur lorsque vous survolez ces boutons.
mpen
Merci pour les commentaires! Je travaille sur une bibliothèque de remplacement qui fournira automatiquement moins de boutons lorsque la sélection à la minute n'est pas une exigence.
Andrew M. Andrews III
que toute page + time a des milliers de lignes de texte et de code, mais je n'ai pas pu trouver 1 seul exemple de démonstration de travail du sélecteur de date / heure sur la page .. soupir ... on pourrait penser qu'une sorte de démo serait à la top quelque part.
Heriberto Lugo