español - jQuery Datepicker y Timepicker para el mismo campo de entrada que emerge una tras otra

datetimepicker jquery doc

Question

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

primero llama al datepicker y el usuario haría clic en la fecha deseada e ingresaría el valor, luego aparecería el timepicker y anexaría la fecha que el usuario seleccionó en la primera acción.

Estoy usando los plugins jQuery UI Datepicker y Timepickr

Entonces tengo 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. Enlazar el selector de fecha a la entrada.
2. Adjunte método para abrir timepicker al evento .onClose () del selector de fecha.
3. Agregue el valor del selector de tiempo (con un espacio precedente) para ingresar el valor.

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

La documentación proporciona un breve ejemplo sobre cómo enlazar un evento / acción con el cierre del datepicker:

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

En este ejemplo, puede usar su función después de "onClode:" para escribir el valor en la entrada y abrir el timepicker.

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

Answer 3

Puedes intentar combinar las entradas de ambos controles en una 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 el que puede combinar la fecha / hora en un solo campo con un selector de combo de fecha / hora sencillo, fácil de usar (¡y rápido!).

Answer 5

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

Simplemente enlace el evento click para que aparezca:

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

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

Answer 6

Por favor revisa el enlace .

He actualizado un problema de diseño y agregué un segundo control deslizante, que estará activo si {showTime:true, time24h:true}

Puede encontrar el original en Google Code .