Logo

How to Display a Formatted Date

Dates are always an important part of web apps. Especially the SaaS variety. As we store dates into a database for later retrieval we need to be able to display these in a nice readable way.

There are a few ways to do this. The go to way for most developers is to use strftime. It's in almost any programming language, so it's familiar. But it's almost impossible to remember all of the options and flags to get what you want.

The other is to use a gem or external library to do the heavy lifting for you.

I'll explore these two techniques to display dates in a human friendly way for your users.

All examples are in Ruby.

Setup

Before we start, we will need a date to work with. Fire up an irb session and create a new date.

    irb
    require 'date'
    date = Date.new(2014, 07, 29)

Now that we have a date we can start to look at ways we might want to show the data.

Let's look at an uploaded file for an example. Let's say your app allows someone to upload a file to save for a future date. It would be helpful if a user knew what day they uploaded the file. But not just what day, like the 17th of June, but what day of the week. That extra bit of information may help them remember some context around the upload.

strftime

If there is one method to rule them all in regards to Dates and Times it's strftime. The problem is that because it does so much, it's hard to remember how to use it. The Internet is littered with cheat sheets. There is even a website to help you.

A quick overview

Here is a super quick overview of what strftime can display

    %a - The abbreviated weekday name (Sun)
    %A - The full weekday name (Sunday)
    %b - The abbreviated month name (Jan)
    %B - The full month name (January)
    %d - Day of the month (01..31)
    %y - Year without a century (00..99)
    %Y - Year with century
    %H - Hour of the day, 24-hour clock (00..23)
    %I - Hour of the day, 12-hour clock (01..12)    
    %l - Hour of the day ()
    %M - Minute of the hour (00..59)
    %S - Second of the minute (00..60)  

Let's say we want to display the date in the format or Sunday August 12, 2014. Given our Date object, we could write

    date.strftime("%A %B %e, %Y")
    => "Tuesday July 29, 2014"

Now you have a nicely formatted date to display to the user.

So you could print out something like Uploaded on Tuesday July 29, 2014 to the screen for the user.

This is great, but I want to touch on one more aspect about strftime. Using Time instead of Date gives a specific time the file was uploaded. Let's add the time the file was uploaded.

Let's do that now.

    date = Time.now
    => 2014-07-30 11:25:25 -0400

With this, we can look at our strftime overview and see that %I will display the hour in a 12 hour clock, %M will display the minute of the hour, and that %p will display AM or PM. If we add these we get an even better display of the date and time that the file was added.

    date.strftime("%A %B %e, %Y at %I:%M %p")
    => "Wednesday July 30, 2014 at 11:25 AM"

Now our message becomes Uploaded on Tuesday July 29, 2014 at 11:25 AM

Gems

You can get pretty far with just strftime. But as with all things Ruby, there is another way. I will just concentrate on the most popular, but just know that one search on Ruby Toolbox will give you plenty of options.

Kronic

Kronic is a ruby gem for displaying dates in a friendly format. Whether it's as good as strftime is a matter of taste.

With Kronic, you can give it a date and it will display text like "Today" or "Yesterday" or "Last Wednesay". It's all relative to today's date.

I am writing this on July 30, 2014. Everything will be relative to that date

Getting started

To get going, install the gem

    gem install kronic

Fire up irb and require the gem

    irb
    require 'kronic'

Now we can start playing. Format a date as of today.

    Kronic.format(Date.today)
    => "Today"

Format yesterday's date.

    Kronic.format(Date.new(2014,07,29))
    => "Yesterday"

Now, let's display the day a week ago.

    Kronic.format(Date.new(2014,07,23))
    => "Last Wednesday"

Kronic is really powerful for displaying relative dates in a readable format. Unfortunately, it's no so good at displaying times.

Depending on what you are trying to communicate will help you decide which route to take. And there are more. These are just two.

Feel free to play around with these and see what you can come up with. I would love to hear about what you were able to create. Feel free to email me at scott@10pixels.net and let me know.