Dynamically select a timezone in a Rails time_zone_select based on the browser's timezone using jQuery/JavaScript.

jquery-time-zone-select.js

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

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' %>

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
   }
 });
}

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 :)