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>

Ah, sod. I screwed up entering the link there, here it is again... [jQuery Timepicker mod](http://puna.net.nz/timepicker.htm) — Fentex, Dec 13 '09 at 00:52

score 16 · Answer 1 · answered Apr 01 '10 at 14:23

16

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.

answered Apr 01 '10 at 14:23

Andrew M. Andrews III

1,989
18
23

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 http://www.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! – Andrew M. Andrews III Apr 22 '10 at 14:36
2

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(). – jessica Jan 22 '11 at 07:12
Thanks, Jessica! If anyone else experiences, please don't hesitate to use the Contact form on the website! – Andrew M. Andrews III Jan 25 '11 at 12:23
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! – Eduardo Feb 09 '11 at 21:51
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. – Andrew M. Andrews III Feb 12 '11 at 13:18

Sampson · Answer 2 · 2009-06-22T17:51:34.333

1

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.

Bind date-picker to input.
Attach method to open timepicker to .onClose() event of date-picker.
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
  }
});

edited Jun 22 '09 at 17:51

answered Jun 22 '09 at 17:31

Sampson

265,109
74
539
565

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 – Phill Pafford Jun 22 '09 at 17:45
hmm how do I call the timepicker? – Phill Pafford Jun 22 '09 at 18:35
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 http://razum.si/jQuery-calendar/TimeCalendar.html or the plugin mentioned in Alexander's response. – Sampson Jun 22 '09 at 19:22
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. – Sampson Jun 22 '09 at 19:25
I have change the code some but still having issues, see new edit – Phill Pafford Jun 22 '09 at 19:56

score 1 · Answer 3 · edited Mar 06 '13 at 14:27

1

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.

edited Mar 06 '13 at 14:27

Erwin Julius

519
5
13

answered Sep 18 '11 at 23:19

Bat_Programmer

6,717
10
56
67

score 0 · Answer 4 · edited Jun 22 '09 at 17:38

0

Here's an alternative:

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

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

edited Jun 22 '09 at 17:38

Sampson

265,109
74
539
565

answered Jun 22 '09 at 17:27

AlexC

9,657
17
64
98

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. – Sampson Jun 22 '09 at 17:38
1

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 Jun 22 '09 at 19:28
10

The link for that is now dead. – Marcel Apr 29 '10 at 05:25
and that link says "Trojan Imposter" on my antivirus ;) – Prof Mar 20 '11 at 23:42

score 0 · Answer 5 · answered Jun 22 '09 at 17:38

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

score 0 · Answer 6 · edited Feb 12 '15 at 10:21

0

Please checkout the link.

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

You can find the original one at Google Code.

edited Feb 12 '15 at 10:21

atiquratik

1,296
3
27
34

answered Sep 15 '10 at 15:07

sakhunzai

13,900
23
98
159

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

6 Answers6