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
Re
ElliebC19 | 08/02/2010, 20:12
Re
MEGANnE30 | 04/02/2010, 07:14
Sometimes that happens that you have no free time to finish your thesis titles just about this topic. A lot of different students do a problem of it, because they don’t know a thing about thesis writing services, but we will show you advices about the correct ways to detect the fantastic dissertation writing service or how to buy dissertation online per good prices.
Re
sZSarah | 03/02/2010, 23:33
Sometimes, scholars write the the dissertation by their own. But some prefer to buy the nice outcome connected with this good post from the thesis writing service, because that seems to be more easy.
Nice post
Custom Essay | 25/01/2010, 09:28
Hi,
This is really a wonderful article and also obviously one great post. Thanks for the valuable information and insights you have so provided to us. Keep up the good work.
Re
Gwenml26 | 05/01/2010, 11:14
The release about this good topic is very good enough and just because of that the essay writing service can trade cheap already written essay and a lot of people buy an essay.
jQuery Datepicker time picking mod
Fentex | 13/12/2009, 02:50
Ah, my attempt to embed a link failed.
The URL to my example:
http://puna.net.nz/timepicker.htm
jQuery Datepicker time picking mod
Fentex | 13/12/2009, 02:48
I've recently had to solve the same problem. My solution is a mod to someone elses implementation of the ideas here.
Here's an example of my solution.
@gondo Not too useless
01419110 | 29/10/2009, 10:52
@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 :)
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!
You seem to be very cool and your article referring to this post is really hot. Would you continue your exploring? I would like purchase some masters thesis and thesis from you.