Selecionador de data / hora do jQuery [fechado]

245

Eu estive procurando um plugin jQuery decente que possa lidar com datas e horas. A interface do usuário principal DatePickeré ótima, mas, infelizmente, também preciso levar tempo.

Encontrei alguns hacks para o DatePicker funcionar com horários, mas todos parecem muito deselegantes e o Google não está aparecendo nada agradável.

Existe um bom plugin jQuery para selecionar datas e horas em um único controle de interface do usuário com uma interface utilizável?

Chelsea
fonte
Tenho certeza de que meu exemplo é um pouco menos confuso e mais amigável. Existem prós e contras de ambos.
7609 Michael Stone

Respostas:

251

De longe, a opção mais agradável e simples de selecionar o DateTime é http://trentrichardson.com/examples/timepicker/ .

É uma extensão do DateQuicker da interface do usuário do jQuery, portanto ele suporta os mesmos temas e funciona da mesma maneira, sintaxe semelhante etc. Isso deve ser fornecido com a imo da interface do usuário do jQuery.

xordon
fonte
3
Eu tenho usado este, e eu adoro isso.
Sonny
3
Eu gosto disso, mas ainda é MUITO buggy.
Alastair Pitts,
11
"MUITO buggy"? Dificilmente. Eu o uso no código de produção e já há algum tempo. Também é desenvolvido ativamente.
Sonny
7
@ Sonny: se você usá-lo na produção não tem influência se é de buggy ou não. Você pode simplesmente não ter visto seus erros porque não está fazendo as coisas que os expõem, o que talvez seja o Alastair. Por outro lado, ele não oferecem qualquer evidência para sua reivindicação, então eu não estou inclinado a levá-la muito a sério ...
iconoclasta
18
Meu maior problema com este plugin é a interface do usuário: por que eu gostaria de usar controles deslizantes, horizontais, para inserir uma hora !? Parece e me parece muito estranho. Tive a experiência tantas vezes com controles deslizantes, onde não consigo chegar ao número que desejo (repetindo um pouco mais do que um pouco abaixo) e acabo digitando. Um teclado é normalmente a maneira mais fácil de inserir um valor numérico preciso. Se você deseja um método de entrada visual, um relógio é o normal para o tempo, não um controle deslizante. Mais difícil de implementar, mas pode realmente ser útil (desde que a entrada do teclado também seja possível).
Iconoclast
46

@ David, obrigado pela recomendação! @fluid_chelsea, acabei de lançar o Any + Time (TM) versão 3.x que usa jQuery em vez de Prototype e possui uma interface muito melhorada, então espero que agora atenda às suas necessidades:

http://www.ama3.com/anytime/

Qualquer problema, por favor me avise através do link de comentário no meu site!

Andrew M. Andrews III
fonte
6
Any + Time (TM) versão 4.x já está disponível! A nova versão suporta ZONAS DE TEMPO (encontre ISSO em qualquer outro seletor!), Bem como seletores / encadeamento jQuery, fácil remoção (evite vazamentos de memória!) E muitas outras melhorias. Por favor, dê uma volta e, se você tiver algum problema ou sugestão, informe-me através da página de comentários no meu site.
Andrew M. Andrews III
4
Any + Time parece bem liso. Eu gosto disso.
Zack Peterson
Acabei de implementar o AnyTime em alguns minutos em um aplicativo Rails. Funciona perfeitamente.
Gwyn Morfey
Acabei de escolher o selecionador AnyTime como meu escolhido para o meu aplicativo JSF! Obrigado pelo bom produto, mantenha o bom trabalho!
Arg
O Any + Time anexa uma nova div oculta à interface do usuário para cada entrada Any + Time (diferente do datepicker da UI do jQUery que reutiliza a interface do usuário da div oculta), isso reduz muito o desempenho no MSIE6 mal projetado. Portanto, não use o Any + Time se precisar oferecer suporte ao MSIE6!
Eduardo
14

Na minha opinião, as datas e horas devem ser tratadas como duas caixas de entrada separadas para que sejam mais utilizáveis ​​e eficientes para a entrada do usuário. Deixe o usuário inserir uma coisa de cada vez é um bom princípio, imho.

Uso o DatePicker da interface do usuário principal e o seletor de horário a seguir.

Este é inspirado no que o Google Agenda usa:

jQuery timePicker :
exemplos: http://labs.perifer.se/timedatepicker/
projeto no github: https://github.com/perifer/timePicker

Eu achei que era o melhor entre todas as alternativas. O usuário pode inserir rapidamente, parece limpo, é simples e permite que o usuário insira tempos específicos até o minuto.

PS: Na minha opinião: os controles deslizantes (usados ​​por alguns selecionadores de hora alternativos) levam muitos cliques e exigem precisão do mouse do usuário (o que torna a entrada mais lenta).

Magne
fonte
Isso mata os benefícios do C # MVC de ligação para esse campo modelo
Serj Sagan
13

Minha melhor experiência com um datepicker é com o AnyTime baseado em protótipo . Sei que não é jQuery, mas ainda pode valer a pena o compromisso para você. Não conheço absolutamente nenhum protótipo e ainda é fácil trabalhar com isso.

Uma ressalva que eu encontrei: não é compatível com a frente em alguns navegadores. Ou seja, não funcionou com uma versão mais recente do protótipo no Chrome.

David Berger
fonte
1
Se eu pudesse usar o protótipo, isso não seria um problema, infelizmente estamos presos ao jQuery para este aplicativo.
7779 Chelsea
7
Apenas uma atualização - o AnyTime 3 agora funciona com jQuery.
Jaxidian
Não penso nisso há meses e meses. Mas meu projeto pessoal queria alguma atualização e eu estava quase pronto para lançar algum jquery. Eu pensei em substituir o datepicker enquanto estou nele, porque não precisava de todos os recursos do Any + Time e achei que seria melhor usar o jQuery. E bam! Me deparei com isso. Timing impressionante.
David Berger
Bom, apesar de o seletor de ano (clicar em <ou>) ser desagradável para mim.
codificador
7

Apenas para adicionar informações aqui, o The Fluid Project possui um ótimo artigo sobre wiki, com uma visão geral de um grande número de seletores de data e / ou hora aqui .

Jaxidian
fonte
4

Eu pesquisei isso recentemente e ainda não encontrei um selecionador de data decente que também inclua um selecionador de tempo decente . O que acabei usando foi o incrível DatePicker do eyecon , com dois menus suspensos simples para o tempo. Fiquei tentado a usar o Timepickr.js , parece uma abordagem muito boa.

deceze
fonte
3

Eu encontrei o mesmo problema. Na verdade, desenvolvi minha programação usando o servidor, mas fiz uma pesquisa rápida para tentar ajudá-lo e descobri isso.

Parece bom, não olhou muito para a fonte, mas parece ser puramente JavaScript.

Veja:

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

Aqui está o link da página de demonstração:

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

boa sorte

Michael Stone
fonte
Eu tenho usado isso por alguns anos. Está ficando um pouco longo no dente, mas funciona.
codificador
1

Este é um código que eu uso para que um usuário selecione um datetimepicker, defina o datetimepicker e faça com que o outro datetimepicker inclua um minuto nesse horário.

Eu precisava disso para um controle de medicação personalizado ....

Enfim, pensei que poderia ajudar alguém, já que eu não consegui encontrar a resposta em nenhum lugar on-line ...

(pelo menos não uma resposta completa)

Tenha em mente que o 60000 adicionado adiciona um minuto. (60 * 1000 milissegundos)

$('.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()));
        }
    });
Carlos Martini
fonte
1

Dê uma olhada no seguinte plugin JavaScript.

Calendário Javascript com data e hora

Eu fiz o mais simples possível. mas ainda nos seus primeiros dias. Deixe-me saber o feedback para que eu possa melhorá-lo.

Joe
fonte
1

Não é jQuery, mas funciona bem para um calendário com hora: JavaScript Date Time Picker .

Acabei de vincular o evento click para exibi-lo:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
bigspotteddog
fonte
1
Atualizado o link - eles o moveram.
bigspotteddog
Uso esse há alguns anos, embora o tenha invocado de maneira diferente (portanto, não reconhecendo pelo seu código). Estou migrando para o DatePicker do jquery, desde que o da floresta tropical esteja parecendo um pouco longo.
codificador
0

Eu faço uma função como esta:

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;
}

Então eu uso o datepicker da interface do usuário do jQuery assim:

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

Então, eu recebo o valor assim: 2010-10-31 12:41:57

dhaniBinZain
fonte
às vezes precisamos para determinar o tempo (não utilizando a função getTime)
bungdito