…On Demystifying Dates (Somewhat)
The first step in getting something usable for individuals accustomed to human-readable times and dates is simply using the Date constructor. A new Date() gives you that moment in time.
var d = new Date() // Thu Aug 06 2015 11:07:40 GMT-0400 (EDT)
But you don’t have to just create right now. You can also generate a moment in time. For example on my current project, Sluggr, my Ruby dev sends me some ISO dates, which are not great for a user to look at. But I can fix them with the above trick:
var userTime = "2015-07-30T14:53:54.146Z" //an ISO date
var convertedTime = new Date(userTime) //Thu Jul 30 2015 10:53:54 GMT-0400 (EDT)
You can also just pass in numbers of a date:
new Date(1805, 7, 5) // Mon Aug 05 1805 00:00:00 GMT-0400 (EDT)
//Months start at 0, so the 8th month is index 7
That’s pretty remedial, but at least gives you something tangible — especially if you’ve accidentally fiddled with Date.now() and wound up with a mass of milliseconds. And now that you have a Date object, you can start playing with it.
GET: is a good set of methods for pulling values out of our new date string, since you probably don’t need the time zone, offset, and other data when representing a date. Using Chrome Console you can preview your options:
This gives you things like day of week, date, month, etc — all in numeric format. Meaning you still need a conversion formula if you’re one of those demanding people who want, say, the word February. The plus side is, it’s highly customizable. When I built my color clock, I needed individual hour, minute and second values to set the RGB values of my background.
var tick = new Date()
var hour = tick.getHours()
var minute = tick.getMinutes()
var second = tick.getSeconds()
But generally speaking, writing those conversion formulae is clunky — hence the value of Moment. But if you don’t want to add a whole new library, there’s another handy set of built-in methods.
TO: let’s you get pretty workable strings from your Date.
It’s not particularly customizable, but if you just want a simple date string it couldn’t be easier. You can even do it in the same step as instantiating your date:
var d = new Date().toDateString() //"Thu Aug 06 2015"
Working with my partner’s ISO string, I just pass that as an argument to the new Date function and I’ve got that date in the same readable format:
var convertedTime = new Date(userTime).toDateString()
//"Thu Jul 30 2015"
And there you have it. Dates do not need to be scary and unapproachable. Sure a lot of the time it still pays to have a library to render dates for you conveniently. But if you like doing it yourself, these tools are a great starting point.