JQuery Datepicker and Timepicker for same input field to popup one after another

datepickerdatetimepickerjquerytimepicker

I have a Datepicker and a Timepicker in 2 separate input fields but I need to combine the 2 fields inputs into one for a database call. Wanted to know if I could only use 1 input field for both controls?

first call the datepicker and the user would click the date wanted and it would enter the value, then the timepicker would popup and append the date the user selected in the first action.

I'm using the jQuery UI Datepicker and Timepickr plug-ins

So I have something like this

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

But would like something like this

<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>

Best Answer

I'd like to recommend Any+Time(TM), in which you can combine the date/time in a single field with a single, easy-to-use (and quick!) date/time combo picker.