¿Qué es un buen selector de tiempo de JavaScript? [cerrado]

86

¿Cuál es un buen selector de tiempo para jquery o js independiente? Me gustaría algo como el que usa Google en su calendario, donde tiene un menú desplegable de tiempos comunes en intervalos de 15 minutos o le permite escribir manualmente un tiempo y lo valida.

javascript  jquery  time  input 
— Elemento
fuente
Un selector de tiempo muy simple con botón giratorio aquí
— om39a
13
Recomiendo reabrir la pregunta. Es importante reconocer que la categoría 'no constructiva', como todas las categorías, debería tener excepciones; creo que incluirla para preguntas como esta, donde la respuesta requiere conocimientos de programación y no es algo que se pueda investigar fácilmente.
— Dan Nissenbaum

Respuestas:

74

Algunos recursos:

— Christian C. Salvadó
fuente
57
... Y no un espectador entre ellos
— Rudu
3
El TimeDatePicker es probablemente el mejor.
— JD Stuart
9
Realmente no veo cómo TimeDatePicker es una mejora con respecto a una lista de selección.
— Jon z
4
la mayoría de las bibliotecas rotas
— FooBar
6
Este es mucho mejor: weareoutman.github.io/clockpicker
— Stefan Steiger
26

Este es el mejor que he encontrado hasta la fecha http://trentrichardson.com/examples/timepicker/

— Felix
fuente
2
Dependiendo de la aplicación, esta también es una de mis favoritas. Sin embargo, tuve que cambiar el período de pasos de un minuto de 1 a 15, pero fue muy fácil.
— Chris Dutrow
mi favorito de la lista. es fácil, simple y lo que necesita. He usado el widget de calendario AJAX de Any + Time ™ Datepicker / Timepicker antes, pero voy a intentarlo en su lugar.
— Daniel
El sitio web (y el ejemplo de JavaScript) ya no están disponibles. ¿Hay alguna muestra en algún otro lugar?
— James Moberg
2
Los controles deslizantes no son exactamente la forma más fácil o rápida de seleccionar una hora precisa.
— mpen
@Mark Estoy de acuerdo con tu opinión, la forma más sencilla puede ser una lista de selección o mostrar una calculadora para que el usuario pueda escribir.
— Felix
8

No estaba contento con ninguno de los selectores de tiempo sugeridos, así que creé el mío propio inspirándome en las especificaciones de Perifer y HTML5:

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

Puede usar los nuevos atributos html5 para la entrada de tiempo (paso, mínimo, máximo) o usar un objeto de opciones:

<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 una entrada como esta:

  • Inserte ":" si falta
  • ¿Hora no válida? Reemplazar con blanco
  • ¿No es una hora válida según el paso? Redondea hacia arriba / hacia abajo al paso más cercano

La especificación HTML5 no permite am / pm o sintaxis de hora localizada, por lo que solo permite el formato hh: mm. Se permiten segundos de acuerdo con las especificaciones, pero aún no lo he implementado.

Es muy "alfa", por lo que puede haber algunos errores. No dude en enviarme parches / solicitudes de extracción. Probar manualmente en IE 6 y 8, FF, Chrome y Opera (el último estable en Linux para los últimos).

— gregers
fuente
1
¿Tiene una demostración disponible?
— mpen
Lo siento, no. No he tocado ese proyecto en 4 años. No dude en enviar solicitudes de extracción :)
— gregers
6

Puede leer la publicación del creador de jQuery, John Resig, al respecto aquí: http://ejohn.org/blog/picking-time/ .

— Sophie Alpert
fuente
4
Requiere demasiada precisión del mouse para el usuario promedio. Tampoco es obvio de inmediato cómo usar esa cosa (a pesar de que él dice que es "intuitivo"): no puedo mirarlo y saber cómo se comportará cuando coloque el mouse sobre esos dígitos.
— mpen
4

He estado usando ClockPick .

— tvanfosson
fuente
No está mal, pero el posicionamiento del elemento está desactivado.
— mpen
esto me llevó a una página sospechosa pidiendo actualizar flash. Verifique el enlace y actualice.
— lets0code
3

CSS Gallery tiene una variedad de Selectores de tiempo. Echar un vistazo.

El selector de tiempo de Perifer Design es similar al de Google

— Alagu
fuente
1
Ah Perifer es exactamente lo que estoy buscando, pero no parece realizar ninguna validación, es decir, me permite escribir "999999999" como valor
— Elemento
3

En caso de que alguien esté interesado en otro TimPicker de JavaScript, desarrollé y mantengo un complemento jQuery que hace el trabajo. Funciona de manera similar a EZ Time JS (aunque no lo supe hasta hace 5 minutos: D), lo que permite a los usuarios ingresar la hora de casi cualquier forma con la que se sientan cómodos y convertir la entrada a un formato común.

Pedido de la página Opciones TimePicker jQuery para verlo en acción.

— Willington Vega
fuente
La demostración está rota (¡o no entendí cómo usarla!).
— PhiLho
1

Lo siento chicos ... tal vez sea un poco tarde ... he estado usando NoGray ... es genial ...

4
Nunca es demasiado tarde para que alguien (no es necesario el póster original) lo encuentre útil. .. ... excepto que CMS ya menciona NoGray ...
— asombro
-1

NoGray es agradable a la vista, pero hay algunas consideraciones de usabilidad. En primer lugar, los relojes analógicos son cada vez más oscuros y, a veces, los jóvenes tienen dificultades para leerlos. En segundo lugar, arrastrar con el mouse a una hora específica es un poco tedioso, al igual que los selectores de tiempo que usan un control deslizante. En tercer lugar, la interacción del teclado para este selector es un poco esporádica.

Para obtener un selector de tiempo más utilizable, consulte el widget de calendario AJAX de selector de fecha / selector de tiempo Any + Time ™ . Es quizás el selector de tiempo más rápido y fácil de usar disponible, porque usa botones simples para seleccionar tiempos específicos con rapidez y facilidad.

Una prueba interesante de usabilidad es la siguiente: elija una hora impar (digamos, 10:32 pm), luego vea cuánto tiempo lleva seleccionar con precisión esa hora usando varios selectores de tiempo. Probablemente pueda hacerlo más rápido con Any + Time ™ de lo que podría escribir la hora a mano. ¡Intente encontrar otro selector del que pueda decir eso! Sin mencionar, Any + Time ™ admite una innumerable variedad de formatos de fecha / hora, reloj de 12/24 horas, personalización completa de CSS (o jQuery UI) e incluso zonas horarias.

— Andrew M. Andrews III
fuente
Buen selector. Gratis para uso no comercial, pero debe comunicarse con el desarrollador sobre los costos de licencia para proyectos comerciales.
— Andrew Lewis
6
Da la casualidad de que él es el desarrollador ...
— steve_c
No es necesario seleccionar los 10 y 1 para los minutos por separado; casi nunca necesitas tanta precisión. Combine los 10 y 1 y haga 12 filas en incrementos de 5 minutos. Se alineará mejor con las horas, será más rápido y será suficiente para la mayoría de los casos de uso. También puede considerar cambiar el cursor a una mano / puntero al pasar el cursor sobre esos botones.
— mpen
¡Gracias por la respuesta! Estoy trabajando en una biblioteca de reemplazo que proporcionará automáticamente menos botones cuando la selección al minuto no sea un requisito.
— Andrew M. Andrews III
que cualquier página de + hora tiene miles de líneas de texto y código, pero no pude encontrar 1 demostración de ejemplo de trabajo del selector de fecha / hora en la página ... suspiro ... uno pensaría que habría algún tipo de demostración en el arriba en alguna parte.
— Heriberto Lugo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.