Qual é um bom seletor de tempo para jquery ou js autônomo? Eu gostaria de algo como o Google usa em seu calendário onde tem uma lista de tempos comuns em intervalos de 15 minutos ou permite que você digite um tempo manualmente e ele valida.
Qual é um bom seletor de tempo para jquery ou js autônomo? Eu gostaria de algo como o Google usa em seu calendário onde tem uma lista de tempos comuns em intervalos de 15 minutos ou permite que você digite um tempo manualmente e ele valida.
Respostas:
Alguns recursos:
Este é o melhor que encontrei até a data http://trentrichardson.com/examples/timepicker/
Aqui está um que funciona com o Twitter Bootstrap.
Não fiquei satisfeito com nenhum dos seletores de tempo sugeridos, então criei o meu próprio com inspiração nas especificações do Perifer e do HTML5:
http://github.com/gregersrygg/jquery.timeInput
Você pode usar os novos atributos html5 para entrada de tempo (etapa, min, max) ou usar um objeto de opções:
<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>
Valida a entrada assim:
A especificação HTML5 não permite am / pm ou sintaxe de hora localizada, portanto, permite apenas o formato hh: mm. Segundos são permitidos de acordo com as especificações, mas ainda não o implementei.
É muito "alfa", então pode haver alguns bugs. Sinta-se à vontade para me enviar patches / solicitações de pull. Testei manualmente no IE 6 e 8, FF, Chrome e Opera (último estável no Linux para os últimos).
Você pode ler a postagem do criador do jQuery, John Resig, sobre isso aqui: http://ejohn.org/blog/picking-time/ .
A Galeria CSS tem uma variedade de Seletores de tempo. Dar uma olhada.
O seletor de tempo do Perifer Design é semelhante ao google one
Caso alguém esteja interessado em outro TimPicker JavaScript, desenvolvi e mantenho um plugin jQuery que faz o trabalho. Funciona algo como EZ Time JS (embora eu não soubesse disso até 5 minutos atrás: D), permitindo que os usuários insiram o tempo de quase qualquer maneira com a qual se sintam confortáveis e convertendo a entrada em um formato comum.
Verifique a página de opções do jQuery TimePicker para vê-lo em ação.
Tenho usado jquery ui timepicker
NoGray é um bom colírio para os olhos, mas existem algumas considerações de usabilidade. Em primeiro lugar, os relógios analógicos estão ficando cada vez mais obscuros e os mais jovens às vezes têm dificuldade em lê-los. Em segundo lugar, arrastar com o mouse para um horário específico é um pouco entediante, assim como os seletores de horário que usam um controle deslizante. Em terceiro lugar, a interação do teclado para este seletor é um pouco esporádica.
Para um selecionador de tempo mais utilizável, verifique o widget de calendário AJAX Any + Time ™ Datepicker / Timepicker . É talvez o selecionador de tempo mais rápido e fácil de usar disponível, porque usa botões simples para selecionar tempos específicos com rapidez e facilidade.
Um teste interessante de usabilidade é este: escolha um horário estranho (digamos, 22:32) e veja quanto tempo leva para selecionar esse horário com precisão usando vários seletores de tempo. Você provavelmente pode fazer isso mais rápido com Any + Time ™ do que poderia escrever o tempo à mão - apenas tente encontrar outro seletor sobre o qual você possa dizer isso! Sem mencionar que Any + Time ™ suporta uma variedade incontável de formatos de data / hora, relógio de 12/24 horas, customização CSS (ou jQuery UI) completa e até mesmo fusos horários!