jQuery Datepicker e Timepicker per lo stesso campo di input per popup uno dopo l'altro

Question

Ho un Datepicker e un Timepicker in 2 campi di input separati, ma ho bisogno di combinare i 2 campi in input per una chiamata al database. Volevo sapere se potevo usare solo 1 campo di input per entrambi i controlli?

prima chiamare il datepicker e l'utente farebbe clic sulla data desiderata e inserirà il valore, quindi il timer visualizzerà popup e aggiungerà la data selezionata dall'utente nella prima azione.

sto usando le jQuery UI Datepicker e Timepickr plug-in

così ho qualcosa di simile

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

ma vorrei qualcosa di simile

<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

Ecco un'alternativa:

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

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

Answer 2

È possibile associare un evento all'evento onClose() di DatePicker. Apri il tuo time picker. Lascia che il datepicker scriva il valore base dell'input e fa in modo che il timepicker aggiunga il suo valore seguendo uno spazio allo stesso input.

1. Associare il selettore di data all'immissione.
2. Collegare il metodo per aprire il timepicker all'evento .onClose() del selezionatore di date.
3. Aggiunge il valore del time-picker (con uno spazio precedente) al valore di input.

Aggiornamento: il seguente è un aggiornamento risultante da una domanda aggiornata.

La documentazione fornisce un breve esempio su come associare un evento/azione alla chiusura del datepicker:

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

In questo esempio, è possibile utilizzare la funzione seguente "onClode:" scrivere il valore all'input e popup il timepicker.

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

Answer 3

Si può provare a combinare i fattori produttivi da entrambi i controlli in uno come

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

Answer 4

vorrei raccomandare Any+Time(TM), in cui è possibile combinare la data/ora in un unico campo con un singolo facile da usare (e veloce!) selezionatore di data/ora.

Answer 5

Si prega di controllare il link.

Ho aggiornato qualche problema di layout e ha aggiunto secondo cursore, che sarà attivo se {showTime:true, time24h:true}

È possibile trovare quello originale a Google Code.

Answer 6

Non jQuery, ma funziona bene per un calendario nel tempo: JavaScript Date Time Picker.

Basta legare l'evento click di pop up:

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

Personalmente trovo questo molto più facile da seguire. Ma ovviamente hai così tante opzioni con più plug-in jQuery disponibili per fare il tuo lavoro.