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

Question

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>

Answer 1

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.

Answer 2

You could bind an event to the onClose() event of the datepicker. Have it open up your time picker. Let the datepicker write the base value of the input, and have the timepicker append it's value following a space to the same input.

1. Bind date-picker to input.
2. Attach method to open timepicker to .onClose() event of date-picker.
3. Append time-picker value (with a preceding space) to input value.

Updated: The follow is an updated resulting from an updated question.

The documentation gives a brief example on how to bind an event/action to the closing of the datepicker:

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

In this example, you could use your function following "onClode: " to write the value to the input, and popup the timepicker.

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

Answer 3

Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.

Just bind the click event to pop it up:

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

Personally I find this much easier to follow. But obviously you have so many options with multiple jquery plugins available to do your job.