web-dev-qa-db-fra.com

jQuery sélecteur de date / heure

Je cherche un plugin jQuery décent capable de gérer à la fois les dates et les heures. L’interface utilisateur de base DatePicker est excellente, mais j’ai malheureusement besoin de pouvoir y consacrer du temps.

J'ai trouvé quelques astuces pour que le DatePicker fonctionne avec le temps, mais elles semblent toutes assez peu élégantes et Google ne montre rien de bien.

Existe-t-il un bon plugin jQuery pour sélectionner les dates et les heures dans un seul contrôle d'interface utilisateur avec une interface utilisable?

javascriptjquerydatepickerdatetimepicker
245
Chelsea

L'option de sélecteur DateTime de loin la plus simple et la plus simple est http://trentrichardson.com/examples/timepicker/ .

Il s'agit d'une extension du Datepicker de jQuery UI, de sorte qu'il supporte les mêmes thèmes. Il fonctionne pratiquement de la même manière, avec une syntaxe similaire, etc. Cela devrait être fourni avec l'interface utilisateur jQuery UI imo.

251
xordon

@ David, merci pour la recommandation! @fluid_chelsea, je viens de publier la version 3.x d'Any + Time (TM), qui utilise jQuery à la place de Prototype et possède une interface bien améliorée. J'espère donc qu'elle répond désormais à vos besoins:

http://www.AMA3.com/anytime/

Tout problème, s'il vous plaît laissez-moi savoir via le lien de commentaire sur mon site!

46
Andrew M. Andrews III

À mon avis, les dates et les heures doivent être traitées comme deux zones de saisie distinctes pour être la plus utilisable et la plus efficace possible pour l'utilisateur. Laisser l'utilisateur entrer une chose à la fois est un bon principe, à mon humble avis.

J'utilise le noyau I DatePicker , et le sélecteur d'heure suivant.

Celui-ci est inspiré de celui utilisé par Google Agenda:

jQuery timePicker:
exemples: http://labs.perifer.se/timedatepicker/
projet sur github: https://github.com/perifer/timePicker

J'ai trouvé que c'était la meilleure parmi toutes les alternatives. L'utilisateur peut entrer rapidement, il a l'air propre, est simple et permet à l'utilisateur de saisir des heures précises à la minute près.

PS: À mon avis, les curseurs (utilisés par certains sélecteurs de temps alternatifs) prennent trop de clics et exigent une précision de la souris de la part de l'utilisateur (ce qui ralentit la saisie).

14
Magne

Ma meilleure expérience avec un sélecteur de date est avec le prototype AnyTime . Je sais que ce n'est pas jQuery, mais ça vaut peut-être encore le compromis pour vous. Je ne connais absolument aucun prototype et il est encore assez facile de travailler avec.

Une mise en garde que j'ai trouvée: il n'est pas compatible en avant sur certains navigateurs. Autrement dit, cela ne fonctionnait pas avec une version plus récente du prototype sur Chrome.

13
David Berger

Pour ajouter des informations aux informations ici, The Fluid Project a un article sur le wiki de Nice, présentant un grand nombre de sélecteurs de date et/ou d’heure ici .

7
Jaxidian

J'ai récemment effectué des recherches sur cette question et je n'ai pas encore trouvé de sélecteur de date décent incluant également un sélecteur de temps décent . Ce que j'ai fini par utiliser était le génial DatePicker de eyecon , avec deux simples listes déroulantes pour gagner du temps. J'ai été tenté d'utiliser Timepickr.js bien, cela ressemble à une approche vraiment sympa.

4
deceze

J'ai rencontré le même problème. J'ai en fait développé ma programmation côté serveur, mais j'ai fait une recherche rapide pour essayer de vous aider et j'ai trouvé ceci.

Cela semble aller, n'a pas trop regardé la source, mais semble être purement JavaScript.

Regardez:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

Voici le lien vers la page de démonstration:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

bonne chance

3
Michael Stone

C'est un code que j'utilise pour qu'un utilisateur sélectionne un datetimepicker, définisse la date/heure et demande à l'autre datetimepicker d'ajouter One Minute à cette heure.

J'avais besoin de ça pour un contrôle de médicaments personnalisé ....

Quoi qu'il en soit, j'ai pensé que cela pourrait aider quelqu'un d'autre car je ne pouvais trouver la réponse à aucun moment en ligne ...

(du moins pas une réponse complète)

Gardez à l'esprit que le 60000 ajouté ajoute une minute. (60 * 1000 millisecondes)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });
1
carlos martini

Jetez un coup d'œil au plugin JavaScript suivant.

Calendrier Javascript avec date et heure

Je l'ai fait pour être aussi simple que possible. mais il est encore à ses débuts. Faites-moi savoir les commentaires afin que je puisse l'améliorer.

1
Joe

Pas jQuery, mais cela fonctionne bien pour un calendrier avec le temps: sélecteur de date et heure JavaScript.

Je viens de lier l'événement click pour le faire apparaître:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
1
bigspotteddog

Je fais une fonction comme ceci:

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

Ensuite, j'utilise le datepicker de l'interface utilisateur jQuery comme ceci:

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

Donc, je reçois la valeur comme ceci: 2010-10-31 12:41:57

0
dhaniBinZain