Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dynamically select a timezone in a Rails time_zone_select based on the browser's timezone using jQuery/JavaScript.
jQuery.fn.selectTimeZone = function() {
var $el = $(this[0]); // our element
var offsetFromGMT = String(- new Date('1/1/2009').getTimezoneOffset() / 60); // using 1/1/2009 so we know DST isn't tripping us up
if (offsetFromGMT[0] != '-') {
offsetFromGMT = '+' + offsetFromGMT; // if it's not negative, prepend a +
}
if (offsetFromGMT.length < 3) {
offsetFromGMT = offsetFromGMT.substr(0, 1) + '0' + offsetFromGMT.substr(1); // add a leading zero if we need it
}
var regEx = new RegExp(offsetFromGMT); // create a RegExp object with our pattern
$('option', $el).each(function(index, option) { // loop through all the options in our element
var $option = $(option); // cache a jQuery object for the option
if($option.html().match(regEx)) { // check if our regex matches the html(text) inside the option
$option.attr({selected: 'true'}); // select the option
return false; // stop the loop—we're all done here
}
});
}
$('#time-zone-select').selectTimeZone(); // invoke our function on the time zone select menu
@thisisbrians

This comment has been minimized.

Copy link
Owner Author

thisisbrians commented Feb 3, 2013

Works for a Rails time_zone_select, such as (in embedded Ruby):

<%= time_zone_select :time_zone, ActiveSupport::TimeZone.all, nil, {:include_blank => false}, :id => 'time-zone-select' %>
@hugobyrne

This comment has been minimized.

Copy link

hugobyrne commented Dec 10, 2014

A nice little routine but it wasnt accounting for daylight saving so it was an hour off when picking the time-zone when I used it.

http://stackoverflow.com/questions/11887934/check-if-daylight-saving-time-is-in-effect-and-if-it-is-for-how-many-hours

This version fixed it for me.

jQuery.fn.selectTimeZone = function() {

   var $el = $(this[0]); // our element
   // var offsetFromGMT = String(- new Date('1/1/2009').getTimezoneOffset() / 60); // using 1/1/2009 so we know DST isn't tripping us up

   year = new Date().getFullYear();
   var jan = new Date(year, 0, 1);
   var jul = new Date(year, 6, 1);
   var offsetFromGMT = String(-(Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset())/60));


   if (offsetFromGMT[0] != '-') {
      offsetFromGMT = '+' + offsetFromGMT; // if it's not negative, prepend a +
   }
   if (offsetFromGMT.length < 3) {
      offsetFromGMT = offsetFromGMT.substr(0, 1) + '0' + offsetFromGMT.substr(1); // add a leading zero if we need it
   }
   offsetFromGMT = '\\' + offsetFromGMT;

   var regEx = new RegExp(offsetFromGMT); // create a RegExp object with our pattern

   $('option', $el).each(function(index, option) { // loop through all the options in our element

     var $option = $(option); // cache a jQuery object for the option
     console.log($option.html());
     if($option.html().match(regEx)) { // check if our regex matches the html(text) inside the option
       $option.attr({selected: 'true'}); // select the option
       return false; // stop the loop—we're all done here
   }
 });
}
@ayb

This comment has been minimized.

Copy link

ayb commented May 20, 2016

Thanks for sharing this.

For what it's worth, I had some issues with iPhone Mobile Safari (iOS 9.3-ish) not always setting the time zone field properly (even when it identified the timezone and had the right regexp etc.)

So I ended up changing the line $option.attr({selected: 'true'}); to $option.prop('selected', true); and it began working a lot more consistently for me.

Your mileage may vary, but it was the solution to my frustration :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.