Create a timezone dropdown with Ember.js

Asked By: Anonymous

Are there any Ember.js addons that would make it easy to create a timezone dropdown? I’m thinking about a Ember.TimezoneSelect view for example.

If not, then how should I go about doing it myself?

One way would be to just have the timezone array in App: App.timezones = [...]. And then in the view: {{view Ember.Select contentBinding="App.timezones"}}. Is there a better solution?

Or should I create a TimezoneController, bind the Select to one of its property, so that I could later just do an ajax request to get all the timezones, and it would update the select field?

Solution

Answered By: Anonymous

If you’re talking about IANA/Olson time zones (see here), then I would recommend against a drop-down list. There are so many, it can be overwhelming to a user. Picking the right one can be challenging. Map-based timezone pickers provide a much better user experience. Here is one in Javascript that I use a lot. See here for a live demo.

If you’re talking about Windows time zones, then yes – you could just return the list from TimeZoneInfo.GetSystemTimeZones() using the Id as the key of the dropdown, and the DisplayName as the value.

I don’t think you’ll find anything specific to Ember in this regard, but I could be wrong.