This was mentioned in #197442: Simplify/Rework the timezone picker as something that could be improved upon in Drupal 7, but I'm not quite sure we got the experience complete. Picking a timezone is still a complete drag in Drupal. The select list of 400+ cities is completely unnavigable, especially since it's not even listed by country (it's by continent, e.g. America/Vancouver).

I've developed a new combo jQuery library and ImageMap combination that can be easily updated ( updates) in the future to support new timezone structuring. Combined with PHP 5.3's ability to pinpoint timezone locations via timezone_get_location(), we can build a pretty mean timezone picker.

The intention of this library is to be a drop-in. It doesn't have any server-side requirements, it works on all browsers IE6+ (it *is* an image map after all) including mobile and touchscreen devices. I'm going to work on a D7-compatible module for demonstration purposes, but I'd like to include this functionality everywhere in core where we have a timezone dropdown.

Demonstration of the new picker is available at, which will be the official home of the library, plus the GitHub source code of course (which actually hosts the whole library).


nod_’s picture

Issue tags:+JavaScript


webchick’s picture


nod_’s picture

Possible to have a simpler/cleaner theme for the map? I like the ubuntu one where it highlight the whole timezone. Since we now have Japan showing up on the d.o map, we could go for this projection it makes northern eurasia/canada bigger and easier to see/click on.

But yes, as far as the feature is concerned, like webchick said :)

(edit) and as I've learned, it seems that there is no permanent inhabitant of antartica, we don't need to show it on the map.

quicksketch’s picture

I like the ubuntu one where it highlight the whole timezone.

We do already highlight the whole timezone, except for the international ocean waters. I've investigated this a little bit but oceanic timezone shapes are a little hard to come by. We probably don't need to be perfect and we could probably generate shape files based off the rules outlined at (which is the source of the shape files that timezone picker is based on). I'm guessing that clicking on the ocean would probably do some math to figure out which capital city is geographically closest and select that timezone.

Regarding simplification, we can simply turn off the border around countries to clean up the appearance, though I find the borders helpful in most situations. More importantly it helps make it so that all the borders are seamless by covering up the small gaps between countries. Again something that could probably be fixed with some better shapefile-foo. Both problems should probably be left to the timezone picker project itself, and as it improves upstream we can update our implementation.

For starters I've built a contrib project based on the JavaScript library that makes headway on what changes are needed for this to be part of core: It creates a new form element of #type 'timezone_picker'.

I was also discussing in IRC yesterday with Gabor and others, apparently we ask for the "Default country" as part of the installer, but this setting does absolutely nothing. It was added as part of #333156: Add ability to configure site default country but future improvements were never made. As part of building this timezone picker into the installer, I think we should kill the visible "Default country" select list option as part of the installer and base it off the timezone in a hidden field. That way we can keep the functionality and promise of the default country option, while not bothering end users with setting the option.

quicksketch’s picture

(edit) and as I've learned, it seems that there is no permanent inhabitant of antartica, we don't need to show it on the map.

I cropped off Antartica in the image from We didn't have timezone data for Antartica in the image map anyway.

nod_’s picture


kristiaanvandeneynde’s picture

I love it, but I'm having a hard time selecting the smaller countries in Europe (Belgium, The Netherlands, Austria, ...)
Seeing as countries may vary in DST, this could be a nuisance.

Awesome work, though!

quicksketch’s picture

Status:Active» Closed (won't fix)

I don't plan on implementing this. Anyone interested please reopen.

cweagans’s picture

Assigned:quicksketch» Unassigned
Status:Closed (won't fix)» Active

Maybe this then? Seems like people were pretty supportive of it, and some general improvement is still definitely a good thing (even if it's not the jQuery plugin you wrote).

quicksketch’s picture

Thanks @cweagans, that's fine with me. It's even fine if the same library *is* used, but it's just not something I'll be working on.

afeijo’s picture

I just spoke with quicksketch on #drupal-contribute

I will try to adventure on this issue :) I love neat features

Hanno’s picture

Bojhan’s picture

I think this would be a good improvement, its probably a little big ass for the installer. But probaly a good UX tweak.

klonos’s picture

Even if this is deemed to actually be "big ass" after all, can we please at the very least consider replacing the huge drop-down with an autocomplete + drop-down combo instead (as also proposed in #1933614-21: [META] Locale settings in Drupal make little (UX) sense)?

afeijo’s picture

Following my plan that was approved by quicksketch, webchick, alexpott and catch, I ported timezone_picker module to Drupal 8

I created a branch, commited and pushed the new code

Waiting quicksketch to make it public. I don't know if I can do it as a new maintainer

the issue for follow up: #2083879: Port Timezone Picker to D8 (bad title, someone with access should change it? =] )

After that port has been approved, I will do the other improvements and then move it all into D8 core.

klonos’s picture

bad title, someone with access should change it?

Done: #2083879: Port Timezone Picker to D8

nod_’s picture

Version:8.x-dev» 9.x-dev
Issue summary:View changes
GiorgosK’s picture

allowing to pick the timezone based on Country would also be a great improvement
if you pick country timezone is autoselected