This is a simple gem that uses some simple tag generation helpers and some in-page javascript using RequireJS, Knockout and Moment.js to make sure times displayed in a page are in the browser's local time zone and format.

Add this line to your application's Gemfile:

gem 'in_the_zone'

And then execute:

$ bundle

Or install it yourself as:

$ gem install in_the_zone

Pretty simple:

require 'in_the_zone'

# Time
InTheZone.time_tag( Time.now.utc, format: 'L', from_now: true, live_update: true )
# => <span class="local-time" data-bind="localizeTime: { timestamp: 1400885511, format: 'L', from_now: true, live_update: true }">05/23/14</span>
InTheZone.time_tag( Time.now.utc )
# => <span class="local-time" data-bind="localizeTime: { timestamp: 1400886211, format: 'LLL' }">May 23 2014 11:03 PM</span>

# Date
InTheZone.date_tag( Date.today.to_time.utc )
# => <span class="local-time" data-bind="localizeTime: { timestamp: 1400828400, format: 'LL' }">May 23 2014</span>

Which will generate markup like:

<span class="local-time" data-bind="localizeTime: { timestamp: 1400885511, format: 'L', from_now: true, live_update: true }">05/23/14</span>
<span class="local-time" data-bind="localizeTime: { timestamp: 1400886211, format: 'LLL' }">May 23 2014 11:03 PM</span>
<span class="local-time" data-bind="localizeTime: { timestamp: 1400828400, format: 'LL' }">May 23 2014</span>

Then if you include the JS from the gem at the path gleaned from:

InTheZone.javascript_path # => "/Workspaces/in_the_zone/static_assets/javascripts/inthezone.js"

Or if you have the gem install, you can just run:

> in_the_zone_js_path
/Workspaces/in_the_zone/static_assets/javascripts/inthezone.js

# Or if you have it in your bundle:
> bundle exec in_the_zone_js_path
/Workspaces/in_the_zone/static_assets/javascripts/inthezone.js

Or, if you use RequireJS, you can add this to your config file:

requirejs.config({
  paths: {
    ko: 'path/to/knockout',
    moment: 'path/to/moment',
    inthezone: 'path/to/js/file/you/got/above'
  }
});
require.config({
  paths: {
    inthezone: 'pat/to/js/file/you/got/above',
  }

You can of course just copy the JS file to your repo as well... whatever works!

This span will automatically fill in with the time displayed in the correct format, in the correct timezone for the browser, as long as you have required the inthezone module and applied bindings.

define('test',
  ['ko', 'moment', 'inthezone'],
  function(ko,moment,zone) {
    ko.applyBindings();
  }
);

Please see the demo page at static_assets/test.html.

1. Fork it ( http://github.com/remotezygote/in_the_zone/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request