Timepicker for jQuery inspired by Google Calendar(jonthornton.github.com)
jonthornton.github.com
Timepicker for jQuery inspired by Google Calendar
http://jonthornton.github.com/jquery-timepicker/
11 comments
Very true, mobile wasn't really taken into consideration with this plugin.
One option would be to use a <select> dropdown as the element you attach $.timepicker() to, and only initialize the timepicker for certain screen sizes. Other screens would see the default <select> element, which works better on mobile devices.
One option would be to use a <select> dropdown as the element you attach $.timepicker() to, and only initialize the timepicker for certain screen sizes. Other screens would see the default <select> element, which works better on mobile devices.
Seems to work fine on my iPhone?
On my iPhone, it doesn't work as well. Yes, the dropdown selections show up, but the keyboard pops up as well, and on top of the selections, so unless you know that the selections are there, you won't even notice them.
I hate to harp on you here because you're clearly just attempting to help, but I think the statement
> Seems to work fine on [the] iPhone?
is representative of the main issue with the mobile web. Most people only build with iOS and maybe Android in mind.
Thankfully Android's browser is bad enough that it's raised awareness of how difficult it is to build complex cross platform web applications.
> Seems to work fine on [the] iPhone?
is representative of the main issue with the mobile web. Most people only build with iOS and maybe Android in mind.
Thankfully Android's browser is bad enough that it's raised awareness of how difficult it is to build complex cross platform web applications.
Works fine on my Android phone's stock browser...
Very nice.
One suggestion, it'd be nice if the selection/options updated as you typed. ie typing 06 scrolled to show 06:00, 06:15 etc.
or filtered the possible options to only show those matching /06/.
I don't see the difference between this and a <select> element, except that the latter looks much better and works cross-platform. It doesn't offer any new functionality like auto-complete or validation. Am I missing something?
How are you going to float a value to the right inside of a native select value? How are you also going to style the value separately (font-weight, color etc)? All that is really available is optgroups vs. options.
My app uses a lot of these: I generally hand generate them however due to the range always changing.
From an astetics standpoint, when I have two times I personally like a slider with two handles. in GCal I'm always dragging my apointments longer and shorter in the overview, not in the details. My "solution" is to use two select boxes with the times, and then use this plugin to convert it to a slider: http://www.filamentgroup.com/lab/update_jquery_ui_slider_fro...
From an astetics standpoint, when I have two times I personally like a slider with two handles. in GCal I'm always dragging my apointments longer and shorter in the overview, not in the details. My "solution" is to use two select boxes with the times, and then use this plugin to convert it to a slider: http://www.filamentgroup.com/lab/update_jquery_ui_slider_fro...
I like it, but similar to others, it doesn't limit the input to the selections. From a UE standpoint, I found it a problem that I could type in abcd, and that's not a valid time.
I like the very clean design. I get annoyed with some of the flashy plugins that have tons of options, get really complicated, and are 10's of KB in size. This one is simple and clean. Well done.
One a site note... for the duration example, is it possible to make columns to line up the time and duration in columns rather than just with spaces? I have some auto-suggest code where I'd like to make two columns that are aligned rather than just with spaces.
One a site note... for the duration example, is it possible to make columns to line up the time and duration in columns rather than just with spaces? I have some auto-suggest code where I'd like to make two columns that are aligned rather than just with spaces.
Yup, the time inputs just need a common parent element for the datepair example, and it doesn't have to be the direct parent. You could use a table or do something with floats.
Very similar to this: http://labs.perifer.se/timedatepicker/
Love this! I have a calendar text field / dropdown that I built in YUI that works similarly ... this is a perfect addition to that instead of the dropdown I am using now for the time field.
I've been using it on several occasions, it's a tiny JS and CSS file and it's pretty simple for configuration too.
I got a very simple scrollbar hourpicker, I can't remember seeing something similar on Google Calendar..
This is exactly what I needed for a side-project I'm working on for my mom. Thanks!
I think in the not-to-distant-future, especially as mobile browsing overtakes desktop browsing, its going to be a prerequisite that plugins/widgets work on both screens. As people evaluate whether or not to use a plugin, this will quickly become a deciding factor.
Again, not a critique of this plugin. Just a thought I had while looking at this and being kind of sad that I couldn't really experience the demos on my phone.