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

Here's an alternative:

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

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

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

You can try combining the inputs from both controls into one like

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

Answer 4

Found this link:

http://milesich.com/timepicker/

Just want I was looking for, thanks all for your input ;)

Answer 5

I've had need to address this problme myself recently. My solution has been to modify a plugin for jQuery-UI.

I've an example http://puna.net.nz/timepicker.htm'>here.

Answer 6

Ah, sod. I screwed up entering the link there, here it is again...

jQuery Timepicker mod

Answer 7

Hi, Can you help me to implement this code http://home.jongsma.org/software/js/datepicker

I don't know how to use it I need a complete example pleaze Help me I really need this

Thanks a lot

Answer 8

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 9

please checkout the link

http://pastebin.com/kTfDz4km

I have updated some layout issue and added second slider , which will be active if {showTime:true, time24h:true}

you can fine the original one at :

http://code.google.com/p/php-form-builder-class/source/browse/trunk/includes/jquery/ui/timepicker.js?spec=svn176&r=176