Interactive time-zone picker

When selecting a timezone you have to choose from a list of 422 items. Quickly finding an entry in this list can be difficult as you have to look through options with the same region and typing city names does not work.

Proposed resolution

Create an interactive map time-zone picker, on clicking a location, the time-zone gets highlighted and the value gets filled in the Time-zone field.

User interface changes

An interactive map will be added, on clicking a location, the time-zone gets highlighted and the value gets filled in the Time-zone field.

1. I like the Ubuntu 14.04 time-zone setter. The location typing field loads beautifully and accurately
2. The map click also works great. Refer to the attached screen-shot
Also found the Jquery Timezone picker - http://timezonepicker.com/

Also found relevant drupal.org projects:

https://www.drupal.org/project/timezone_picker
https://www.drupal.org/project/tzfield

CommentFileSizeAuthor
Screenshot from 2017-02-16 11:35:35.png174.26 KBprabhu9484
regions_grouped_drupal_before_patch.png42.93 KBprabhu9484

Comments

prabhu9484 created an issue. See original summary.

xjm’s picture

xjm
she/her
Primary language English
commented
Component: system.module » datetime.module
Category: Task » Feature request
Issue tags: -Drupal, -core, -Timezone, -map, -d8ux, -UX, -D8UX usability
Related issues: +#2847651: Improve timezones selector with optgroups

This sounds like an excellent usability feature to add. Thanks @prabhu9484 for posting this!

(Cleaning up the tags a bit).

mpdonadio’s picture

mpdonadio
he/him
Primary language English
Location Philadelphia/PA/USA (UTC-5)
commented

Big +1 to this in spirit, but am not totally keen on the map thing. I worry about accessibility and mobile usability with that.

My preference would be to keep the existing select list as-is for non-JS users. Then, we can come up with a JS solution that splits this into a group selector (the list from http://php.net/manual/en/timezones.php), and then AJAXs in the list from that group (eg, pick Africa, then the list from http://php.net/manual/en/timezones.africa.php) appears as a new select. Almost similar to how single-item config export works.

As a side note, I think a lot of UX issues with big selects could be solved by using Chosen in core, but not going to fight that here. Combining the progressive select thing w/ Chosen would be sweet (it it amazing with config export, esp views).

But again, +1 to the idea in general. With the additional TZ work that we are doing, improved UX will be a huge win.

rachel_norfolk’s picture

rachel_norfolk
Primary language English
Location UK
commented

With the additional TZ work that we are doing

Not sure what you mean? Can you add the issues as related?

Edit - oops - now I read the IS again I think you mean in contrib, right?

mpdonadio’s picture

mpdonadio
he/him
Primary language English
Location Philadelphia/PA/USA (UTC-5)
commented

#4, #2632040: [PP-1] Add ability to select a timezone for datetime field is probably the most relevant core issue to this. Will dig for some more; there may also be a formatter related issue.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

nvexler’s picture

nvexler commented

My favourite TZ map picker project is https://github.com/kevalbhatt/timezone-picker . Something worth checking out.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.