Newbie JavaScript Hacks pt 2

…On Demystifying Dates (Somewhat)

Discovering dates in JavaScript is one of those things that cause new developers, thinking they’re finally get a hang of things, to panic and run for cover. My first experience with Date was supremely baffling. I get the amount of milliseconds since Jan 1, 1970? Okay. Why not? Going to MDN or W3 Schools offers a lot of background, say, about how Day and Month are represented by a number (in which Sunday and January are both 0). But for the green coder, it doesn’t exactly provide a lot of reassurance.

If you’ve worked with JavaScript dates before, this is all very basic stuff. But as someone who’s only recently started feeling comfortable working with dates, I wanted to break things down for the true newbie.

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 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.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.