JuSt a moment with Moment.js

One of the trickier things to deal with in JavaScript is the formatting of dates.

The Date() Object

Dates in JavaScript all start with creating a new instance of the ‘Date’ object.

new Date()

By default, this returns an object that contains the information for the current date and time

If you are looking through server logs or are programmatically generating output that contains timestamps then you can also pass those to the Date object. These are usually in the form of Unix Epoch Time which is the number of seconds since 1st January 1970 at midnight. https://unixtime.org/

Hmmm. At the time of this writing, the Unix Epoch Time is 1667824678 so you might have expected the return value to be something closer to the current date. This is because Date() expects a value you pass to it to be in milliseconds. So after a quick multiplication, you get this.

Date Formatting

What happens when you want to format that date a bit or only want part of it? Let’s say you only want the date from the above output. The time and timezone don’t matter to you. How do you get it?

The Date() object has several methods you can call on it to get just parts of the output. These include methods like .getDay(), .getMonth(), .getDate(), and .getFullYear(). But these have their own shortcomings.

Here is a bit of JavaScript where the timestamp is being hardcoded and passed to a new instance of Date(). Then some of the contents of the Date object are held in variables and then consoled out.

var timestamp = 1667824678;
var timestampDate = new Date(timestamp * 1000);
var day = timestampDate.getDay();
var month = timestampDate.getMonth();
var date = timestampDate.getDate();
var year = timestampDate.getFullYear(); 
console.log(`${day} ${month} ${date} ${year}`)

This is not what we were after. This is because the values in the Date() object for things like the day and month are in integers starting from 0 rather than words like ‘Wed’ and ‘Sep’. If that is the output you want, then you will use a couple of Javascript switches to get there.

var timestamp = 1667824678;
var timestampDate = new Date(timestamp * 1000);
var day = timestampDate.getDay();
var month = timestampDate.getMonth();
var date = timestampDate.getDate();
var year = timestampDate.getFullYear();switch(day) {
  case 0:
    day = 'Sun';
    break;case 1:
    day = 'Mon';
    break;case 2:
    day = 'Tue';
    break;case 3:
    day = 'Wed';
    break;case 4:
    day = 'Thu';
    break;case 5:
    day = 'Fri';
    break;case 6:
    day = 'Sat';
    break;case 7:
    day = 'Sun';
    break;
}switch(month) {
  case 0:
    month = 'Jan';
    break;case 1:
    month = 'Feb';
    break;case 2:
    month = 'Mar';
    break;case 3:
    month = 'Apr';
    break;case 4:
    month = 'May';
    break;case 5:
    month = 'Jun';
    break;case 6:
    month = 'Jul';
    break;case 7:
    month = 'Aug';
    break;case 8:
    month = 'Sep';
    break;case 9:
    month = 'Oct';
    break;case 10:
    month = 'Nov';
    break;case 11:
    month = 'Dec';
    break;
}
console.log(`${day} ${month} ${date} ${year}`)

Now you just need to deal with the lack of a leading 0 on a date that is less than 10. A quick if/else statement and you should have it.

var timestamp = 1667824678;
var timestampDate = new Date(timestamp * 1000);
var day = timestampDate.getDay();
var month = timestampDate.getMonth();
var date = timestampDate.getDate();
var year = timestampDate.getFullYear();switch(day) {
  case 0:
    day = 'Sun';
    break;case 1:
    day = 'Mon';
    break;case 2:
    day = 'Tue';
    break;case 3:
    day = 'Wed';
    break;case 4:
    day = 'Thu';
    break;case 5:
    day = 'Fri';
    break;case 6:
    day = 'Sat';
    break;case 7:
    day = 'Sun';
    break;
}switch(month) {
  case 0:
    month = 'Jan';
    break;case 1:
    month = 'Feb';
    break;case 2:
    month = 'Mar';
    break;case 3:
    month = 'Apr';
    break;case 4:
    month = 'May';
    break;case 5:
    month = 'Jun';
    break;case 6:
    month = 'Jul';
    break;case 7:
    month = 'Aug';
    break;case 8:
    month = 'Sep';
    break;case 9:
    month = 'Oct';
    break;case 10:
    month = 'Nov';
    break;case 11:
    month = 'Dec';
    break;
}if(date < 10) {
  date = '0' + date.toString();
}
console.log(`${day} ${month} ${date} ${year}`)

That was a lot of code for what seems like a pretty simple ask. There’s a lot that could go wrong here and if you ever wanted a different output you’d have to rewrite or discard most of this. If only there was a better way…

Moment.js

Moment.js is a JavaScript library that is made just for handling dates. It works both in the browser and in Node.js.

The new Date() equivalent in Moment.js is moment() and it is an object containing the data for the current time (if no value is passed to it). You then pass this object the .format() method and you get to see the data in the object.

You can also pass a timestamp to .moment() and you will get information on that specific date and time.

One of the best things about Moment.js is just how easy it is to display data from it and how many options you have when doing so. To get the same date value we got from the last example all we have to pass to .format() is a few characters and we get the same output. Here we are passing the same timestamp to the .moment() method and then passing the desired arguments in a string to .format().

A lot less hassle here. No messing with switches or logic to deal with formatting. Pretty straightforward and to the point. Moment.js is pretty easy to set up and use and may save you a bit of effort when dealing with date and time formatting.

Thanks for Reading !!!