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>

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

Solution 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
  }
});

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

Comments

[Fentex]

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

[Sampson]

That wasn't stated. Also, the interface for the time-picker on the provided link is terrible. Took me a few seconds to figure out that clicking a value increments it. Either way, I've removed my down-vote.

[Phill Pafford]

I like the flow of this option but have never binded anything. I have edited my post above to show you the code I'm using. Very basic

[Sampson]

I'm sorry - I don't know. I've never used that particular 3rd party plugin. You would have to consult the documentation for it, or contact the plugin author. In all honesty, it may be easier to seek out a different 3rd party plugin that does both date and time built into one - something like razum.si/jQuery-calendar/TimeCalendar.html or the plugin mentioned in Alexander's response.

[Sampson]

You could try to bind that plugin to the $(".selector") after the $(".selector").val(dateText); line, and then invoke the .click() or .focus() method of the $(".selector") immediately afterwards. That may do it.

[Phill Pafford]

I agree it has what I'ved asked for but not with the plug-ins I'm using which I would like to use. The solution you provided is good but I would agree the the time controls are a little confusing. Thanks though

[Phill Pafford]

I have change the code some but still having issues, see new edit

[Andrew M. Andrews III]

Version 4 has just been released, with many new features including support for TIME ZONES (try to find THAT in any other picker!), jQuery selectors/chaining and easy-removal (to reduce memory leaks and support more dynamic pages). Visit ama3.com/anytime to learn more and download the code. Please use the contact link on that site if you experience any problems or have any suggestions. Thanks!

[Marcel]

The link for that is now dead.

[jessica]

Andrew, I just started using the AnyTime picker on your suggestion. Awesome tool! :) If anyone else finds this post, and is using jqgrid with inline editing, AnyTime picker doesn't quite work right out of the box. If you open a picker and then close the row, and then go back to the same picker field, you'll get an error like "Cannot create another AnyTime picker". The way I found to fix this was to pass $('input').AnyTime_noPicker(); to the oneditfunc of editRow().

[Andrew M. Andrews III]

Thanks, Jessica! If anyone else experiences, please don't hesitate to use the Contact form on the website!

[Eduardo]

Any+Time appends a new hidden div for the UI for every Any+Time input (unlike jQuery UI datepicker that reuses the hidden div UI) this makes performance downgrade a lot in the badly designed MSIE6. So do not use Any+Time if you need to support MSIE6!

[Andrew M. Andrews III]

Any+Time creates a new widget for each input because each input can have a different format, thereby requiring different buttons. This is the first I've heard of a performance downgrade but I will look into the problem and, if necessary, look for possible solutions that don't break the flexibility of the library.

[Prof]

and that link says "Trojan Imposter" on my antivirus ;)