jQuery date/time picker

Question

I've been looking around for a decent jQuery plugin that can handle both dates and times. The core UI DatePicker is great, but unfortunately I need to be able to take time in as well.

I've found a few hacks for the DatePicker to work with times, but they all seem pretty inelegant and Google isn't turning up anything nice.

Is there a good jQuery plugin for selecting dates and times in a single UI control with a usable interface?

I'm pretty sure that my example is a bit less confusing and more user friendly. There are pros and cons of both. — Michael Stone, Aug 07 '09 at 15:11

score 251 · Answer 1 · answered Sep 12 '10 at 09:08

251

By far the nicest and simplest DateTime picker option is http://trentrichardson.com/examples/timepicker/.

It is an extension of the jQuery UI Datepicker so it will support the same themes as well it works very much the same way, similar syntax, etc. This should be packaged with the jQuery UI imo.

answered Sep 12 '10 at 09:08

xordon

5,523
4
18
26

3

I've been using this one, and I LOVE it. – Sonny Oct 11 '10 at 18:00
3

I like this, but it's still VERY buggy. – Alastair Pitts Dec 01 '10 at 01:43
11

"VERY buggy"? Hardly. I use it in production code, and have for a while now. It's also actively developed. – Sonny Jan 06 '11 at 15:16
how about setting showTime=false ? Does this support this feature ? – sakhunzai Jun 28 '11 at 08:25
Not so great for mobile web apps though – modernzombie Sep 07 '11 at 12:42
7

@Sonny: whether you use it in production has no bearing on whether it is buggy or not. You may just not have seen its bugs because you're not doing the things with it that expose them, which perhaps Alastair is. On the other hand, he didn't offer any evidence for his claim, so I'm not inclined to take it too seriously... – iconoclast Dec 07 '11 at 14:36
18

My biggest problem with this plugin is the UI: why would I want to use sliders, horizontal ones at that!, to input a time!? It looks and feels very awkward to me. I've had the experience so many times with sliders where I can't get it to the number that I want (repeatedly going a little over then a little under) and I end up typing it. A keyboard is normally the easiest way to enter a precise numerical value. If you want a visual input method, a clock is the normal one for time, not a slider. Harder to implement, but might actually be useful (as long as keyboard input is also possible). – iconoclast Dec 07 '11 at 14:42
@sakhunzai: Why would it have a showTime=false setting? If you don't want to use a time input, then just use the jQuery DatePicker which is packaged with jQuery UI. This is an addon for the explicit purpose of allowing time input. – Batkins Dec 20 '11 at 19:43
1

@iconoclast: If you implement it on a text-field input, as the author does in his examples, then you have the choice to type the time into the text box, and the component will even adjust to reflect the entered time after it is typed. – Batkins Dec 20 '11 at 19:49
2

@Batkins: yes, but why sliders? Using a calender offers many advantages for picking dates, and once you're using a visual input it makes sense to use another visual input for time. But sliders are not logical in my opinion. A better option would be breaking out HH and MM into separate fields and using up and down arrows beside or above and below the fields. When the datetime picker widget closed, all of the data that was entered would be combined into the single regular form field. – iconoclast Dec 21 '11 at 23:03
this plugin is horribly buggy, can't even get it to work! – Avien Jan 13 '12 at 14:35
A few notes on the default Trent DTP page - you need to reference the jquery UI library(js/css) before the timepicker addon library. – John M Apr 04 '12 at 15:58
And you cant even copy paste the time part. It copies only date. – sevenWonders Jun 18 '12 at 08:18
@Alastair Pitts, you are right, this code needs cleanup... having bugs... – vissu Jun 26 '12 at 06:28
Sliders not working on android galaxy s3. – Induster Mar 10 '13 at 16:22
Been trying for half a day to get this thing to work, to no avail. – SteveCav May 23 '13 at 03:49

score 46 · Answer 2 · answered Dec 28 '09 at 15:02

46

@David, thanks for the recommendation! @fluid_chelsea, I've just released Any+Time(TM) version 3.x which uses jQuery instead of Prototype and has a much-improved interface, so I hope it now meets your needs:

http://www.ama3.com/anytime/

Any problems, please let me know via the comment link on my website!

answered Dec 28 '09 at 15:02

Andrew M. Andrews III

1,989
18
23

6

Any+Time(TM) version 4.x is now available! The new release supports TIME ZONES (find THAT in any other picker!) as well as jQuery selectors/chaining, easy-removal (avoid memory leaks!) and many other improvements. Please give it a ride, and if you have any problems or suggestions, let me know via the comment page on my website. – Andrew M. Andrews III Apr 22 '10 at 13:48
4

Any+Time looks pretty slick. I like it. – Zack Peterson May 17 '10 at 22:07
Just implemented AnyTime in a few minutes on a Rails app. Works perfectly. – Gwyn Morfey Sep 25 '10 at 22:36
I just chose the AnyTime picker as my picker of choice for my JSF app! Thanks for nice product, keep up the good work! – Arg Dec 27 '10 at 20:05
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 05 '11 at 10:25
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 15 '11 at 18:57
Loving this! just implemented this, it's very slick great work :-) – kamui Nov 22 '11 at 09:04
Looks good, but the license prohibits commercial usage. – P Shved Nov 01 '12 at 03:06
This is looking promising to use for choosing store hours. – Induster Mar 10 '13 at 16:29

score 14 · Answer 3 · edited Jan 09 '13 at 12:09

In my view, dates and times should be handled as two separate input boxes for it to be most usable and efficient for the user to input. Let the user input one thing at a time is a good principle, imho.

I use the core UI DatePicker, and the following time picker.

This one is inspired by the one Google Calendar uses:

jQuery timePicker:
examples: http://labs.perifer.se/timedatepicker/
project on github: https://github.com/perifer/timePicker

I found it to be the best among all of the alternatives. User can input fast, it looks clean, is simple, and allows user to input specific times down to the minute.

PS: In my view: sliders (used by some alternative time pickers) take too many clicks and require mouse precision from the user (which makes input slower).

This kills the model binding benefits of C# MVC for that field — Serj Sagan, Jun 18 '13 at 00:26

score 13 · Answer 4 · answered Aug 07 '09 at 15:14

13

My best experience with a datepicker is with the prototype-based AnyTime. I know that's not jQuery, but it may still be worth the compromise for you. I know absolutely no prototype, and it's still easy enough to work with.

One caveat I've found: it is not forward compatible on some browsers. That is, it did not work with a newer version of prototype on Chrome.

answered Aug 07 '09 at 15:14

David Berger

12,385
6
38
51

1

If I could use prototype this wouldn't be a problem, unfortunately we're stuck with jQuery for this app. – Chelsea Aug 07 '09 at 15:28
7

Just an update - AnyTime 3 now works with jQuery. – Jaxidian Mar 26 '10 at 20:43
I haven't thought about this for months and months. But my personal project wanted some updating and I was just about ready to throw in some jquery. I thought I'd replace the datepicker while I'm at it because I didn't need all the features of Any+Time and thought I might as well go all jQuery. And bam! I come across this. Awesome timing. – David Berger Mar 27 '10 at 03:29
Nice, though the year selector ( clicking < or > ) is kludgy to me. – a coder Dec 11 '12 at 18:20

score 7 · Answer 5 · edited Jul 25 '13 at 17:48

7

Just to add to the info here, The Fluid Project has a nice wiki write-up overviewing a large number of date and/or time pickers here.

edited Jul 25 '13 at 17:48

Laxman13

5,226
3
23
27

answered Mar 26 '10 at 20:50

Jaxidian

13,081
8
83
125

score 4 · Answer 6 · answered Aug 09 '09 at 01:44

I researched this just recently and have yet to find a decent date picker that also includes a decent time picker. What I ended up using was eyecon's awesome DatePicker, with two simple dropdowns for time. I was tempted to use Timepickr.js though, looks like a really nice approach.

score 3 · Answer 7 · edited Aug 23 '12 at 22:00

3

I have ran into that same problem. I actually developed my using server side programming, but I did a quick search to try and help you out and found this.

Seems alright, didn't look at the source too much, but seems to be purely JavaScript.

Take look:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

Here is the demo page link:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

good luck

edited Aug 23 '12 at 22:00

Justin Warkentin

9,856
4
35
35

answered Aug 07 '09 at 15:02

Michael Stone

950
2
14
30

I've been using this for a few years. It's getting a little long in the tooth but works. – a coder Dec 11 '12 at 18:27

score 1 · Answer 8 · edited May 23 '12 at 07:21

This is some code I use to have a user select one datetimepicker, set the datetime, and have the other datetimepicker add One Minute to that time.

I needed this for a custom medication control....

Anyway, thought it might help someone else since I could not find the answer any where online...

(at least not a complete answer)

Keep in mind that the 60000 added, adds one minute. (60 * 1000 milliseconds)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });

score 1 · Answer 9 · answered Aug 02 '12 at 15:03

1

Take a look at the following JavaScript plugin.

Javascript Calendar with date and time

I've made it to be simple as possible. but it still in its early days. Let me know the feedback so I could improve it.

answered Aug 02 '12 at 15:03

Sastrija

3,284
6
47
64

bigspotteddog · Answer 10 · 2012-12-12T20:45:41.317

1

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

I just bound the click event to pop it up:

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

edited Dec 12 '12 at 20:45

answered Jan 26 '11 at 19:34

bigspotteddog

1,449
13
14

1

Updated the link - they moved it. – bigspotteddog Dec 12 '12 at 20:46
I've been using that one for a few years, though I invoked it differently (hence not recognizing from your code). I've been migrating to jquery's DatePicker, since the rainforest one is looking a little long in the tooth. – a coder Dec 12 '12 at 20:51

score 0 · Answer 11 · edited May 25 '11 at 23:04

0

I make one function like this:

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

Then I use the jQuery UI datepicker like this:

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

So, I get the value like this: 2010-10-31 12:41:57

edited May 25 '11 at 23:04

Peter Mortensen

30,738
21
105
131

answered Oct 15 '10 at 05:44

dhaniBinZain

21
1

sometimes we need to determine the time (not using getTime function) – bungdito Jul 06 '11 at 05:01

score -4 · Answer 12 · answered Sep 08 '10 at 02:07

-4

We had trouble finding one that worked the way we wanted it to so I wrote one. I maintain the source and fix bugs as they arise plus provide free support.

http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx

answered Sep 08 '10 at 02:07

Petras

4,686
14
57
89

This link is not active unfortunately. – Stefan Oct 01 '12 at 11:30

jQuery date/time picker

12 Answers12

Linked

Related