web-dev-qa-db-fra.com

Sélecteur de temps jQuery

Je cherche à remplir une entrée de texte avec un temps que l'utilisateur peut choisir à 15 minutes d'intervalle. Je sais qu'il existe quelques plugins. Je me demandais s'il y avait un plugin "standard de l'industrie", ou de bonnes raisons objectives de préférer un plugin particulier dans les scénarios courants.

72
Bernardo

J'ai trouvé ce plugin ( référentiel github ) l'emporte sur l'autre mentionné. Il imite le timepicker de Google Agenda.

86
Jim Geurts

J'ai essayé une tonne de timepicker et je n'étais pas satisfait alors j'ai écrit [encore] un autre. Je pense que cela fonctionne bien. En outre, il est inspiré du sélecteur de date, il ressemble donc à des choses d'interface utilisateur jQuery standard.

Les incréments de minutes par défaut sont à 5 et peuvent être réglés à 15 dans les options.

http://fgelinas.com/code/timepicker

35
Francois Gelinas

Mon conseil serait de ne pas le faire. Je trouve assez mauvais d'être obligé d'utiliser un contrôle de calendrier juste pour entrer une date, surtout quand je n'ai pas la possibilité de taper une date que je peux faire beaucoup plus rapidement que de naviguer dans un autre contrôle farfelu.

Les sélecteurs de temps prennent juste ce genre de fétiche de l'interface utilisateur à un nouvel extrême. Pourquoi ne pas permettre à vos utilisateurs de taper l'heure ou d'utiliser simplement quelques boîtes déroulantes pendant des heures et des minutes. Même les listes déroulantes permettent à un utilisateur de simplement saisir l'heure. Le sélecteur de temps dans la réponse de Shog9 est très agréable à regarder mais incroyablement fastidieux à utiliser. Si j'étais un utilisateur final devant utiliser une application de saisie de données et qu'elle avait un contrôle comme celui-ci sur la page, cela ne ferait que me ralentir et me donner envie de venir couper les mains des développeurs. :)

Pensez à la convivialité avant de voir à quoi ressemble l'application.

Juste mon humble avis.

20
Kev

Ce n'est pas jQuery ... mais j'ai trouvé qu'une liste déroulante, avec une liste d'intervalles de quinze minutes, 8 h 00, 8 h 15, 8 h 30, etc., est extrêmement facile à utiliser pour l'utilisateur.

Je ne sais pas si vous vraiment avez besoin d'une méthode jQuery pour le faire ... peut-être exagéré. Juste une opinion basée sur mon expérience personnelle avec vrais utilisateurs et le développement d'applications métier.

10
mattruma

Si vous souhaitez utiliser un bon analyseur de temps et permettre à l'utilisateur d'entrer dans une large gamme de chaînes de temps valides (8h00, 8h00, 8h00, 8h00, etc.), jetez un œil à http://www.datejs.com/ .

Voici le code jquery que j'utilise pour travailler avec.

$('.time').blur(function (e) {
    var val = $(this).val();
    if (!isNaN(val))
        // add minutes to numeric value otherwise it will be interpreted as a date
        val = val + ':00'; 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});
8
Brian

Je pense que chaque réponse, sauf celle de Kev, est subjective. J'ai vu des dixièmes de plug-ins JQuery sélecteur de temps sur le net, et la plupart étaient des gadgets inutiles, mais si vous utilisez déjà le sélecteur de date Jquery standard alors ce plug-in serait approprié.

5
S Bogdan

Essayez cette grande bibliothèque - http://code.google.com/p/mobiscroll/

Démo - http://demo.mobiscroll.com/

4
Nikita Koksharov

Découvrez Maxime Haineault jQuery.timepicker . Assez cool, à mon humble avis ...

4
Shog9

Le meilleur que j'aie jamais utilisé est celui proposé par Telerik.

http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

Il est discret, permettant à l'utilisateur d'entrer simplement l'heure ou de cliquer sur l'icône de l'horloge pour sélectionner dans une liste. Fondamentalement, juste une méthode plus attrayante esthétiquement d'utiliser des listes déroulantes modifiables.

4
Merritt

J'utilise bibliothèque de timepicker de Trent Richardson et je l'ai trouvé génial. Il est également très populaire, en nombre de téléchargements.

3
Ninja

Voici mon essai sur le sujet: http://yoka.github.com/jquery-timeselect/

3
yoka

Bien qu'il n'y en ait pas de standard, j'utilise un plugin jQuery de Keith Wood . Contrairement à certains, cela se dégrade en une zone de texte (que vous pouvez toujours taper tout en effectuant la validation) et peut également être utilisé avec une souris si vous êtes si enclin.

1
Rowland Shaw

j'en ai écrit un basé sur le plugin mentionné par Jim (fonctionne comme le sélecteur de temps de calendrier Google) mais il fonctionne en utilisant la saisie semi-automatique jquery ui. Il est BEAUCOUP plus stable que le plugin mentionné ci-dessus. J'ai eu des problèmes avec celui-ci se positionnant sur la page. Le plugin prend un tableau, une plage de temps et des intervalles ou une source ajax ... afin que vous puissiez le personnaliser selon le contenu de votre cœur.

1
hazmat

Ma situation était légèrement différente, j'avais besoin d'un sélecteur de date et d'heure mais je n'en trouvais pas non plus. J'ai donc décidé d'en écrire un. Vous pouvez trouver le source complète ici ; J'ai également posté ne démo rapide .

1
Petras

Je n'ai pas trouvé de plugin qui a fait ce que je voulais (c'est-à-dire, la saisie semi-automatique multi-colonnes combinée avec le masquage d'entrée pour le temps), alors j'ai écrit MenuOptions

À quoi il ressemble enter image description here

1
MIkee

Any + Time ™ DatePicker/TimePicker AJAX Calendar Widget permet la sélection de l'heure qui, lorsque vous utilisez la souris, est à peu près aussi rapide que la saisie manuelle, mais a l'ajout avantage de la prévention des erreurs. L'heure peut être formatée de n'importe quelle manière nécessaire. Il prend également en charge la manipulation du clavier, bien que l'accès au clavier ne soit pas aussi rapide que la souris ou la saisie ... mais encore une fois, il garantit que la valeur sera au format requis Il est également facile à personnaliser et peut également gérer les dates.