An effective jQuery Date Time picker
It has been a couple of weeks since my search for a 'cool' web 2.0 widget that can help populate not only a date field but a time field as well.In this post I intend to explore ways in which a suitable UI component can be found to solve this problem.
jQuery has a pretty swell date picker from their UI library and there are thoughts of extending it's current state to include more options, CSS flexibility and functional capabilities. All this is welcome development but lacks the addition of a time picker.
The Fluid Project is currently working on a Date/Time picker utilising tabs to separate date and time selectors (picture below).
The jQuery Calendar by extended by Keith Wood (picture below) tried to represent a UI to select time, but the principle of using dropdowns just seems to crowd the widget at the end. Besides, there must be more intuitive ways of selecting figures than by using drop downs.
The other proposal is by Maxime Haineault (haineault.com) in his jquery.timepickr.js library (pictured below). This is a good idea and is an interface that would really look good on Iphone/touchscreen mobile. The 'buttons' for the time digits are a nice variation from the drop down/selectable element ideas as used in the above examples. This plugin is discussed at http://ajaxian.com/archives/time-picker-ui
Now I'd like to explore my initial ideas around a effective Time-picker extending on the jQuery UI Date picker and incorporating the jQuery UI Slider.
I propose that the easiest way to select numbers from a list would be via a slider. It has been used effectively to select numbers in may applications (native OS apps) and thanks to jQuery UI this extensiveness can now to used on the web (of course!).Therefore here is a work in progress snapshot of how the time picker component would look:
Naturally a little more customisaztion of the drag image is possible. The sliders snap to times in between the labeled numbers. This would be to avoid overcrowding the UI, overwhelming the user and loosing UI's cleaness/simplicity.
When it is plugged into the calendar component, this is what we get:
The code is not yet ready; it's just a concept (for now). Updates to come in a few days!!
UPDATE 1:
I've done some preliminary work on the timepicker component alone. Thankfully I have access to an SVN repo and have stuck the project at:
http://source.cet.uct.ac.za/svn/sakai/ux/timepicker
Feel free to checkout and run "index.html" Track the logs as well to keep up to date with the development.
Used: jQuery UI 1.7 with jQuery 1.3
Information and Links
Join the fray by commenting, tracking what others have to say, or linking to it from your blog.
Comments
@gondo Not too useless
01419110 | 29/10/2009, 10:52
usuelss
gondo | 18/10/2009, 05:35
its fcking useless !
first of all it doesnt respect jquery plugin codex
second it totally overwrite original datapicker
third you can't even use original options, it ll just ignore them
forth css + js code is rly lame
i thought it ll be easier and quicker just to try to fix it, but its total waste of time, rather ll write my own
Re: An effective jQuery Date Time picker
sam | 24/06/2009, 11:14
I like the overall concept, but it will not work very well for a 24h clock. Having 2h intervalls is already a big drawback for any practical use for instance in a CMS.
child abuse
Ritesh | 21/06/2009, 11:14
hi..
I read this article ,three times but I think abuse of children in christanity or any religion is done from more than 500 years by priests ,fathers malas .It can’t finish any religion ,but this is our duty to stop abuse of the children by sexuality or any work .This is the problem of most of the countries with different religions.Join September 1 to make a genuine difference through a first day for humanity’s children .
—–
Hardy
—-
Sept 1--Sept 1
similar implementation
Martin Milesich | 16/06/2009, 09:53
Come to see my work on timepicker:
http://milesich.com/timepicker/
same here...
RvdF | 08/06/2009, 16:24
Looks promising, but file is missing (jquery.date.time.picker.js)...
jquery.date.time.picker.js file missing from svn repository
Dan H. | 06/06/2009, 21:07
I'd like to echo what others have already said. The concept looks promising. I would love to test it, but your SVN repository is missing the jquery.date.time.picker.js file so the demo doesn't work. I would like to see it in action if you could push that file up to your repository.
Gorgeous work
Charlie Lindahl | 04/06/2009, 01:08
This is really gorgeous work. I'm pretty astonished that the major jQuery archives I've been surfing don't have a date/time combination picker widget like this.
Missing "image" files in the SVN archive
Charlie Lindahl | 04/06/2009, 01:07
I was trying to download the "orange-themed" version from the SVN archive today.
Some images are missing in the themes/images directory (according to the CSS files in the themes/ directory).
Also, the name of the file that *is* in the image directory has a "." in front of it.
Could you post the relevant files please? Thanks
Would love to see this too
smartpill | 01/06/2009, 16:56
Looks like a great idea. Files are incomplete but concept looks awesome. Hopefully it's easy to customize. 00,15,30,45 are probably more common increments.
datepicker.js file is missing
Mouli | 26/05/2009, 06:12
Hey, this is just a great & fantastic work. But I do find you missing your datepicker.js file in the repository, please update it asap, I can't stop myself seeing it working.
new version
tapastwain | 21/05/2009, 23:05
hi Lovemore,
i fixed many bugs at the datetimepicker.
u should check out the newest version - maybe u find some hints for your own work.
or better: if you could code the design you scribbled.
would be fine to hear from you.
dan
time one the right side is intuitive
Raul Aguilar | 19/05/2009, 03:21
time being listed on the right side of the calendar is intuitive. it is visible, is immediately usable, makes well use of vertical space and impressionable. - good job to get it simple but not too simple!
Re: An effective jQuery Date Time picker
jebaird | 18/05/2009, 20:12
Im very interested in assisting you with this project. Please let me know if there is anything i can do to help. I did notice that you are missing jquery.date.time.picker.js from your repo. could you please upload it?
Files are missing
Rakesh S | 18/05/2009, 14:13
Few files are missing from the location what you have given. Check your subversion & update those missing asap.
Thanks,
Rakesh Sankar.
Looks awesome!
jonny_noog | 04/05/2009, 07:53
Just like to add my voice to say that this widget looks great and I'd love to see it developed further.
Looking sharp
Scott Hanselman | 01/05/2009, 23:45
Looking sharp! This has the potential to be THE widget for dates and times. Ngiyabonga, bhudi.
got it work
TAPASTWAIN | 24/04/2009, 21:17
please look at
http://blog.w3visions.com
please download it and make it beautiful :)
Looks awesome...
Richard@Home | 23/04/2009, 10:30
...and exactly what I'm looking for.
What state is the project at?
Great
Christian | 10/04/2009, 21:47
This looks like nearly the perfect date-time picker. Really good idea, hope it's done soon.
@gondo I have not had a chance to complete the code. My thoughts were that if I release the concept at least guys out there would be aware of it and expand on it if need be.
I gladly welcome any improvement on this idea :)