strftime is a flat circle

Anyone who has spent some time building websites has probably needed to format dates at one point or another. If you are building a Rails blog, for example, and you want to include the creation date of each post, you’re in luck! Rails automatically includes created_at column by default for each model. It logs the time of creation as a DateTime object which, if your post was created on May 28th, 2017, at 3:47 UTC, looks something like this: created_at: “2017–05–28 15:47:09”. It’s easy enough to display the created_at attribute of your post, but “2017–05–28 15:47:09” is hard on the eyes. Luckily, you are working with Ruby, so you have access to a wonderful little method called strftime.

Formatting with strftime

strftime makes me wanna dance

Many programming languages, including Ruby, Perl, Python, C, C++, PHP, Java (not JavaScript though — we’ll get to that) come stock with the strftime method. I pronounce it “sturf-time”, but “strafe-time” and “starf-time” are also acceptable. strftime allows you to format your ugly computer generated date string any way you want. If you have a blog post in the form of an object post with a created_at property of 2017–05–28 15:47:09, you can change it into “July 28, 2017” with a little bit of strtime. Here’s how it works:

post.created_at.strftime('%B %e, %Y ')
#=> May 28, 2017

When you call strftime on a date object, it takes a string as an argument. Within that string, there are a number of directives that you can give, which consist of ‘%’ followed by a letter. Here, I used %B to get the month, %e to get the day, a comma to separate day and year, and then %Y for the year. This is the basic format in any language that has strftime. There are a ton of directives you can use to format the date however you want. Find the full list of them here in the docs. An even better resource for using strftime is this website. It has formatted date presets that you can select, and it will give you the strftime code to replicate it. You can also build your own date format by selecting the elements you want to include.

Why is it called that?

From what I can gather, strftime originally comes from a C library function. The “f” in strftime likely comes from the C convention to use f as an abbreviation for format. This makes sense, because strftime is used to format time. That leaves “str”, which is a common abbreviation for “string”, and “time”, which is self explanatory. strftime is shorthand for “string format time”.

How to do it in JavaScript

JavaScript does not have strftime.

However, the Date class has a few built in methods to help you isolate the parts of a Date object that you want to access. You can get the year, or the day as a number, or the month as a number:

const date = new Date()
// this will give you a Date object of the time you set it, in this // case Sat Jul 29 2017 12:41:22 GMT-0400 (EDT)
date.getFullYear()
// 2017
date.getTime()
// 1501346482285 (milliseconds)
date.getMonth()
// 6
date.getDay()
// 6

The full list of JavaScript date methods can be found here. They are cool, I guess…but not super helpful for making the date nice and readable like strftime does. There are ways to manually format time in JavaScript through string manipulation or arithmetic with milliseconds. Fortunately, there are JavaScript libraries out there that solve this problem without you having to do all the leg work yourself. The best one that I’ve found is Moment.js. Once installed, you create a date object by calling moment().toDate(). From there you can manipulate it in pretty much any way possible. To format the time, you simply call .format() and add arguments inside the parentheses similar to how you would with strftime. Here’s how you would get only the month, date, and year from a Date object using Moment.js:

const date = new Date()
// Sat Jul 29 2017 12:41:22 GMT-0400
const momentObj = moment(date).format('MMMM Do YYYY')
//
Jul 29 2017

Problem solved. There are many more things you can do with Moment, any their webpage has very good documentation. Spend some time with Moment and explore all the possibilities!