jQuery Datepicker y Timepicker para el mismo campo de entrada para emergente uno tras otro

Question

Tengo un Datepicker y un Timepicker en 2 campos de entrada separados pero necesito combinar las 2 entradas de campos en una para una llamada a la base de datos. ¿Quería saber si solo podía usar 1 campo de entrada para ambos controles?

primero llame al datepicker y el usuario haga clic en la fecha deseada e ingrese el valor, luego aparecerá el marcador y anexará la fecha que el usuario seleccionó en la primera acción.

estoy usando los jQuery UI Datepicker y Timepickr plug-ins

Así que tener algo como esto

<input class="datepicker">2009-06-22</input> 
<input class="timepicker">12:00:00</input> 

pero me gustaría algo como esto

<input class="datetimepicker">2009-06-22 12:00:00</input> 

<script type="text/javascript"> 
// Date and Time picker same input field 
$("#datepicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    onClose: function(dateText, inst) { 
     var tempDate = $("#datepicker").val(dateText); 
     $("#datepicker").timepickr({ 
     onClose: function(timeText, inst) { 
      var tempTime = $("#datepicker").val(dateText); 
      alert("Temp Time: '" + tempTime.val() + "'"); 
      $("#datepicker").val(tempDate.val() + ' ' + tempTime.val()); 
     } 
     });         
    } 
});    
</script> 

Answer 1

Aquí hay una alternativa:

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker({ 
    dateFormat: 'yy-mm-dd', 
    timeFormat: ' hh:ii:ss' 
}); 

Answer 2

Puede vincular un evento al evento onClose() del datepicker. Haz que abra tu selector de tiempo. Deje que el marcador de fecha escriba el valor base de la entrada, y haga que el cronometrador agregue su valor después de un espacio a la misma entrada.

1. Vincular selector de fecha a la entrada.
2. Adjunte el método para abrir timepicker al evento .onClose() del selector de fecha.
3. Agregue el valor del selector de tiempo (con un espacio anterior) al valor de entrada.

Actualizado: El siguiente es un resultado actualizado de una pregunta actualizada.

La documentación da un breve ejemplo de cómo enlazar un evento/acción al cierre del selector de fechas:

$('.selector').datepicker({ 
    onClose: function(dateText, inst) { ... } 
}); 

En este ejemplo, se podría utilizar el siguiente función "onClode:" para escribir el valor a la entrada, y emerge el timepicker.

$(".selector").datepicker({ 
    onClose: function(dateText, inst) { 
    $(".selector").val(dateText); 
    // Raise Timepickr 
    } 
}); 

Answer 3

Puede intentar combinar los aportes de ambos controles en uno como

$("#datetime").focus(function() { 
    var mydate = $("#date").val(); 
    var mytime = $("#time").val(); 
    if(mydate && mytime && !this.value) { 
     this.value = mydate + " " + mytime; 
    } 
}); 

Answer 4

me gustaría recomendar Any+Time(TM), en la que se puede combinar la fecha/hora en un solo campo con una sola , selector de combo de fecha/hora fácil de usar (¡y rápido!).

Answer 5

Por favor pago la link.

he actualizado alguna cuestión de diseño y ha añadido segunda corredera, que estará activo si {showTime:true, time24h:true}

Usted puede encontrar el original en Google Code.

Answer 6

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

Sólo enlazar el evento de clic para que aparezca así:

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

Personalmente, creemos que esto mucho más fácil de seguir. Pero obviamente tienes tantas opciones con múltiples plugins jquery disponibles para hacer tu trabajo.