javascript - bootstrap - Selector de fecha/hora de jQuery

datetimepicker format

Question

He estado buscando un plugin jQuery decente que pueda manejar tanto fechas como horas. El Core DatePicker IU DatePicker es genial, pero desafortunadamente, también necesito poder dedicar tiempo.

He encontrado algunos hacks para el DatePicker para trabajar con los tiempos, pero todos parecen bastante poco elegantes y Google no está mostrando nada bueno.

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

Answer 1

@David, gracias por la recomendación! @fluid_chelsea, acabo de lanzar la versión 3.x de Any + Time (TM) 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, por favor hágamelo saber a través del enlace de comentarios en mi sitio web!

Answer 2

Con mucho, la opción más sencilla y sencilla para seleccionar DateTime es http://trentrichardson.com/examples/timepicker/ .

Es una extensión del jQuery UI Datepicker, por lo que es compatible con los mismos temas y funciona de la misma manera, con una sintaxis similar, etc. Esto debería incluirse en el paquete con la jouer UI imo.

Answer 3

Echa un vistazo al siguiente complemento de JavaScript.

Calendario Javascript con fecha y hora

Lo he hecho para que sea lo más simple posible. pero todavía en sus inicios. Déjame saber el feedback para poder mejorarlo.

Answer 4

En mi opinión, las fechas y los horarios deben manejarse como dos cuadros de entrada separados para que sean más útiles y eficientes para que el usuario los ingrese. Permitir que el usuario ingrese una cosa a la vez es un buen principio, imho.

Uso el DatePicker principal de la interfaz de usuario y el siguiente selector de tiempo.

Este está inspirado en el que usa Google Calendar:

Selector de tiempo de jQuery :
ejemplos: http://labs.perifer.se/timedatepicker/
proyecto en github: https://github.com/perifer/timePicker

Me pareció que era 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 por parte del usuario (lo que hace que la entrada sea más lenta).

Answer 5

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

Necesitaba esto para un control personalizado de medicamentos ...

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

(Al menos no es 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()));
        }
    });

Answer 6

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 selector de fechas de jQuery UI de esta manera:

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

Entonces, obtengo el valor como este: 2010-10-31 12:41:57

Answer 7

He investigado esto recientemente y todavía tengo que encontrar un selector de fecha decente que también incluya un selector de tiempo decente . Lo que terminé usando fue el increíble DatePicker de eyecon , con dos simples menús desplegables por tiempo. haineault.com/media/jquery/ui-timepickr/page embargo, tuve la tentación de usar haineault.com/media/jquery/ui-timepickr/page , parece un muy buen enfoque.

Answer 8

Me he encontrado con el mismo problema. Realmente desarrollé mi programación del lado del servidor usando, pero hice una búsqueda rápida para intentar ayudarlo y encontré esto.

Parece bien, no miró la fuente demasiado, pero parece ser simplemente 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

Answer 9

Mi mejor experiencia con un http://www.ama3.com/anytime/ es con el prototipo basado en http://www.ama3.com/anytime/ . Sé que no es jQuery, pero puede que valga la pena el compromiso para ti. 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 posteriores en algunos navegadores. Es decir, no funcionó con una versión más nueva de prototipo en Chrome.

Answer 10

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

Acabo de enlazar el evento de clic para que aparezca:

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

Answer 11

Solo para agregar a la información aquí, The Fluid Project tiene una buena redacción de wiki con una gran cantidad de personas que seleccionan la fecha y / o la hora here .

Answer 12

Tuvimos problemas para encontrar uno que funcionara como queríamos, así que escribí uno. Mantengo la fuente y corrijo errores a medida que surgen, además de proporcionar soporte gratuito.

http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx