I have been looking for a javascript (hopefully jQuery) timezone chooser/picker/control widget that I can include in my social-calendar/event-router web app.
Given that there are approximately 400 cities listed in the usual dropdown menus, I was hoping that someone had taken pity on the poor user and had come with a nice UI widget with a better interface before I create one myself. (I have seen some nice web site examples that use a map to allow for a time zone choice, but they take up too much real estate on the page for my app.)
While there are several ways to list timezones other than just by GMT offset, I think that the best way to organize timezones is to use a hierarchical dropdown menu with sub menus. Then I would list by continent, then sub-menus to list both country and major cities and perhaps city/region exceptions that don’t follow the geographical or daylight savings time rule. i.e Arizona in MST and some cities in Indiana in CST.
Included in the widget would be the ability to remember the user’s last 5 choices and present these at the top of the list.
The widget would also allow the user to type using autosuggest (which will consider the user input as a prefix, suffix and at any other location in the query. which in SQL terms is an equivalent to saying: WHERE some_column_name LIKE %query%). Their typing would present a reduced set of choices making the list to choose from much shorter. i.e.- CST would present the several timezones that use CST as their abbreviation, -7 would present a list of cities that had their current timezone set to GMT-7, 5.5 would list the country of Inida, etc.
If someone knows of a widget that comes close to matching this, would be curious know where they are getting their timezone and DST data, since there are several sources and the data is always being updated.
I think there is a useful dev branch on github of timepicker with timezone here.
As for the limited set of inputs, I really like timepickr, but it still needs a timezone. I’m not sure how you plan to submit this field to the database, but you could just have an adjacent textbox field for the timezone and tie it with jquery autocomplete for the timezones, which would be nice because they could filter off both the long and abbreviation for the timezone if you have them in the text label together.
It also wouldn’t be hard to use jquery autocomplete to roll your own implementation with the limited options.