Dates Cheatsheet

dates.md

Dates Cheatsheet

In this guide, I'll show you how I prefer to handle dates.

We'll

1. use a gem called Chronic to intelligently parse a wide variety of user input into valid Dates,
2. I'll also show you a gem that helps create nice looking datepicker controls,
3. look at some built-in Ruby/Rails methods that help us format dates and times nicely for our users to look at.

Chronic

The Chronic gem will help handle parsing user input strings into valid Date objects before saving them into your date columns.

In your Gemfile, include

gem 'chronic'

and then bundle install and restart your rails server..

In your controller actions, wherever you are assiging a value to a date column, use the Chronic.parse() method:

def create
  @event = Event.new
  @event.title = params[:title]
  @event.held_on = Chronic.parse(params[:held_on])
  @event.save
end

That's it! Your user can now supply inputs like

• thursday
• november
• summer
• friday 13:00
• mon 2:35
• 4pm
• 10 to 8
• 10 past 2
• half past 2
• 6 in the morning
• and many more

Chronic will do its best to figure it out. At a minimum, Chronic solves the issue of Ruby using the international, DD/MM/YYYY, format by default. See the official gem docs for more info.

Bootstrap Datepicker

The bootstrap3-datetimepicker-rails gem will help create nice looking datepickers in your forms, so that users don't have to type in dates and times manually.

In your Gemfile, include

gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'

and then bundle install and restart your rails server.

In app/assets/javascripts/application.js, add the lines

//= require moment
//= require bootstrap-datetimepicker

In app/assets/stylesheets/application.css, add the line

*= require bootstrap-datetimepicker

Now, in your forms, you can add inputs like this:

<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control" name="held_on" id="held_on">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

At the bottom of your view, or anywhere below the <input id="datetimepicker1">, include this JavaScript snippet:

<script type="text/javascript">
  $(function () {
    $('#datetimepicker1').datetimepicker();
  });
</script>

The crucial thing is for the id="" attribute of the <input> tag to match the CSS selector in the $('') function.

You should now be able to click into the input and see a nicely styled datetimepicker.

To pre-select a date (for example, on an edit form), use something like this:

<script>
  $(function () {
    $('#datetimepicker1').datetimepicker({
      defaultDate: "<%= @event.held_on.strftime("%m/%d/%y") %>"
    });
  });
</script>

where @event.held_on returns the date you want to be pre-selected.

LOTS more options on how to use it can be found in the official docs.

Formatting Dates and Times

STRFTIME

Use the .strftime method on any Date or Time object:

<%= event.held_at.strftime('%B %e, %Y at %l:%M%P') %>

Use the wonderful STRFTIME.net tool to help compose your formatting string.

Time Ago In Words

Use the wonderful view helper method time_ago_in_words() to get the distance between the time and now in English:

<%= time_ago_in_words(event.created_at) %> ago

Further reading:

• Dealing with timezones effectively in Rails