jQuery selector de fecha / hora [cerrado]


245

He estado buscando un complemento jQuery decente que pueda manejar fechas y horas. La interfaz de usuario central DatePickeres excelente, pero desafortunadamente también necesito poder tomar tiempo.

He encontrado algunos trucos para que DatePicker funcione con los tiempos, pero todos parecen bastante poco elegantes y Google no está revelando nada bueno.

¿Existe un buen complemento jQuery para seleccionar fechas y horas en un único control de interfaz de usuario con una interfaz utilizable?


Estoy bastante seguro de que mi ejemplo es un poco menos confuso y más fácil de usar. Hay pros y contras de ambos.
Michael Stone

Respuestas:


251

Con mucho, la opción de selector de fecha y hora más bonita y simple es http://trentrichardson.com/examples/timepicker/ .

Es una extensión de jQuery UI Datepicker, por lo que admitirá los mismos temas y funcionará de la misma manera, sintaxis similar, etc. Esto debería empaquetarse con jQuery UI imo.


3
He estado usando este y me ENCANTA.
Sonny

3
Me gusta esto, pero todavía está MUY lleno de errores.
Alastair Pitts, el

11
"MUY buggy"? Apenas. Lo uso en el código de producción, y lo tengo desde hace un tiempo. También se desarrolla activamente.
Sonny

77
@Sonny: si lo usas en producción no influye en si tiene errores o no. Es posible que no haya visto sus errores porque no está haciendo las cosas que los exponen, lo que tal vez sea Alastair. Por otra parte, no ofreció ninguna prueba de su afirmación, así que no estoy inclinado a tomar demasiado en serio ...
iconoclasta

18
Mi mayor problema con este complemento es la interfaz de usuario: ¿por qué querría usar controles deslizantes, horizontales, para ingresar una hora? Se ve y se siente muy incómodo para mí. He tenido la experiencia muchas veces con controles deslizantes en los que no puedo obtener el número que quiero (repetidamente un poco más de un poco por debajo) y termino escribiéndolo. Normalmente, un teclado es la forma más fácil de ingresar un valor numérico preciso. Si desea un método de entrada visual, un reloj es el normal para el tiempo, no un control deslizante. Es más difícil de implementar, pero en realidad podría ser útil (siempre que la entrada del teclado también sea posible).
iconoclasta

46

@David, gracias por la recomendación! @fluid_chelsea, acabo de lanzar Any + Time (TM) versión 3.x que usa jQuery en lugar de Prototype y tiene una interfaz muy mejorada, así que espero que ahora satisfaga sus necesidades:

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

Cualquier problema, hágamelo saber a través del enlace de comentarios en mi sitio web.


66
¡Ya está disponible la versión 4.x de Any + Time (TM)! La nueva versión admite ZONAS HORARIAS (¡encuentre ESO en cualquier otro selector!), Así como selectores / encadenamiento jQuery, extracción fácil (¡evite pérdidas de memoria!) Y muchas otras mejoras. Dale un paseo, y si tienes algún problema o sugerencia, házmelo saber a través de la página de comentarios en mi sitio web.
Andrew M. Andrews III

44
Any + Time se ve muy elegante. Me gusta.
Zack Peterson

Acabo de implementar AnyTime en unos minutos en una aplicación Rails. Funciona perfectamente.
Gwyn Morfey

¡Acabo de elegir el selector AnyTime como mi selector de elección para mi aplicación JSF! Gracias por un buen producto, ¡sigan con el buen trabajo!
Arg

Any + Time agrega un nuevo div oculto para la interfaz de usuario para cada entrada Any + Time (a diferencia de jquery UI datepicker que reutiliza la div UI oculta), esto hace que el rendimiento disminuya mucho en el MSIE6 mal diseñado. ¡No utilice Any + Time si necesita admitir MSIE6!
Eduardo

14

En mi opinión, las fechas y horas deben manejarse como dos cuadros de entrada separados para que sea más útil y eficiente para que el usuario ingrese. Dejar que el usuario ingrese una cosa a la vez es un buen principio, en mi humilde opinión.

Yo uso el núcleo UI DatePicker , y el siguiente selector de tiempo.

Este está inspirado en el que usa Google Calendar:

jQuery timePicker :
ejemplos: http://labs.perifer.se/timedatepicker/
project en github: https://github.com/perifer/timePicker

Me pareció la mejor entre todas las alternativas. El usuario puede ingresar rápidamente, se ve limpio, es simple y le permite ingresar tiempos específicos hasta el minuto.

PD: en mi opinión: los controles deslizantes (utilizados por algunos selectores de tiempo alternativos) toman demasiados clics y requieren la precisión del mouse del usuario (lo que hace que la entrada sea más lenta).


Core UI DatePicker: jqueryui.com/demos/datepicker
Magne

Esto mata los beneficios vinculantes del modelo de C # MVC para ese campo
Serj Sagan

13

Mi mejor experiencia con un selector de fechas es con el prototipo AnyTime . Sé que eso no es jQuery, pero aún puede valer la pena el compromiso para usted. No conozco absolutamente ningún prototipo, y todavía es bastante fácil trabajar con él.

Una advertencia que he encontrado: no es compatible con versiones anteriores en algunos navegadores. Es decir, no funcionó con una versión más nueva del prototipo en Chrome.


1
Si pudiera usar el prototipo, esto no sería un problema, desafortunadamente estamos atrapados con jQuery para esta aplicación.
Chelsea

77
Solo una actualización: AnyTime 3 ahora funciona con jQuery.
Jaxidian

No he pensado en esto por meses y meses. Pero mi proyecto personal quería algo de actualización y estaba a punto de lanzar un poco de jquery. Pensé en reemplazar el selector de fechas mientras lo hacía porque no necesitaba todas las características de Any + Time y pensé que podría ir a jQuery. Y bam! Me encuentro con esto. Increíble momento.
David Berger

Agradable, aunque el selector de año (haciendo clic en <o>) es muy torpe para mí.
un codificador

7

Solo para agregar a la información aquí, The Fluid Project tiene una buena redacción wiki que resume una gran cantidad de recolectores de fecha y hora aquí .



3

Me he encontrado con ese mismo problema. De hecho, desarrollé mi uso de la programación del lado del servidor, pero hice una búsqueda rápida para tratar de ayudarte y encontré esto.

Parece estar bien, no miró demasiado la fuente, pero parece ser puramente JavaScript.

Echale un vistazo:

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

Aquí está el enlace de la página de demostración:

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

buena suerte


He estado usando esto por algunos años. Se está haciendo un poco largo en el diente pero funciona.
un codificador

1

Este es un código que utilizo para que un usuario seleccione un selector de fecha y hora, establezca la fecha y hora y haga que el otro selector de fecha y hora agregue un minuto a esa hora.

Necesitaba esto para un control de medicamentos personalizado ...

De todos modos, pensé que podría ayudar a alguien más ya que no pude encontrar la respuesta en ningún lugar en línea ...

(al menos no una respuesta completa)

Tenga en cuenta que el 60000 agregado agrega un minuto. (60 * 1000 milisegundos)

$('.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

No es jQuery, pero funciona bien para un calendario con tiempo: JavaScript Date Time Picker .

Acabo de vincular el evento de clic para que aparezca:

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

1
Actualizó el enlace, lo movieron.
bigspotteddog

Lo he estado usando durante algunos años, aunque lo invoqué de manera diferente (por lo tanto, no lo reconozco de su código). He estado migrando a DatePicker de jquery, ya que la selva tropical se ve un poco larga en los dientes.
un codificador

0

Hago una función 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;
}

Luego uso el jQuery UI datepicker de esta manera:

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

Entonces, obtengo el valor de esta manera: 2010-10-31 12:41:57


a veces necesitamos determinar el tiempo (sin usar la función getTime)
bungdito

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.