When I first started with JavaScript I found it very difficult and inconvenient to do basic date/time manipulations, that is, until I found a wonderful library called “Moment” which has turned out to be one of the most popular JS libraries out there because of its intuitiveness and the fact that JS lacks an in built date manipulation function that is as easy to use as Moment, so I thought it would be cool to write an article about the basic usages of Moment as well as flex my memory on this brilliant library and learn more along the way!
It’s about time!
First off, to write code for this tutorial and show off Moment’s awesomeoness I am using the online code editor “JSFiddle”
To add the “Moment” library to the fiddle simply click on the small button labelled “cdnjs” to the right of the text “Resources”, then type in “moment.min.js” in the search box that says “JavaScript/CSS URL”, click on the first result that comes up (Moment.js).
After clicking on the top result then click on the “+” button to the right, this will then add the library to the fiddle.
You can also install the jQuery library too if you find it easier to use then vanilla JavaScript.
It’s time to code
The first “Moment” function I will explain is the “Moment” object itself, if you simply write the code “moment()” and place the value of it inside of a div or span you will see that the full date and time is printed out except for a shorthand “day” value, it also prints out how many hours before or after you are from the GMT (Greenwhich Mean Time zone) time zone.
However, with applications you will most likely want to format your date to a certain way and with “Moment” this is incredibly easy.
All you need to do is add the text “format” after the “moment()” object and then specify in what format you wish to show the date i.e. you can exclude the minutes from the time, make the month shorthand etc, examples are below
moment().format("DD/MM/YYYY HH:mm:ss");This code will ouput the following, with a forward slash separating the day, month and year and colons separating the hours, minutes and seconds.
In some instances you may want to see number day we are in in terms of the 365 days of the year, in order to implement this you will need to enter either three or four capital “d”s. Examples are below
var testTime = moment().format("DDD/MMM/YYYY HH:MM");var testTimeTwo = moment().format("DDDD/MMMM/YY HH:MM")
These pieces of code output the below, so we are on the 211th day of the 365 day year so far!
If you wish to set the day as text instead of a number, you can use a lowercase “D” instead, and for every “d” that you enter it will represent a letter of that word i.e. if I entered the formatted date as
moment().format("ddd/MM/YYYY HH:mm:ss");An example is below.
Then it would show the first three letters of the current day, however if want numbers, just stick to capitalising the “d”.
You can also add the suffix into a date by entering “Do” instead of just “D”, so if you entered:
moment().format("Do/MMMM/YY")Todays date is the 30/07/2019 so this moment object above would return “30th/July/19”.
You also do not have to have “/” separating the columns you can have “\”, “|” or “`", do whatever meets your requirements for your projects.
Meanwhile, to return the month of the moment you can enter either one or two “M”s to return a month number from 1 to 12, or if you enter three (shorthand month) or four “M”s (longhand month) you can return the text of the month. Below is an example of this.
Furthermore, with the year you can enter one “Y” and it will still print out the year, in addition you can write two “YY”s for a shorthand year i.e. 2019 would be 19, however, in most practices it is set to 4 “Y”s just to stay consistent as to how people read years.
Do we have time for this?
Onto the hours, minutes and seconds, when defining the hours, you can use either “HH” or “hh”, “HH” will put the time in 24 hour format, whereas, “hh” will put the time in 12 hour format.
In addition to the 24 hour format you can include the current “am” or “pm” value to the time, if you wish the “am” to be lower case then you can simply enter “a” after the seconds. Or if you want it to be uppercase enter “A”. Examples are below.
var testTime = moment().format("DDD/MMM/YYYY HH:MM a");var testTimeTwo = moment().format("DDDD/MMMM/YY A")
If you wish to be incredibly precise with your time you can also include fractional seconds with either “S”, “SS” or “SSS” which each representing a number of the fractional seconds.
var testTime = moment().format("DDD/MMM/YYYY HH:MM:ss:SSS a");Unix
With Moment you can also keep track of the Unix timestamp, which is a digit that represents the time as a total of seconds starting from the date January 1st 1970 UTC.
Within Moment you can represent this Unix timestamp in either seconds or miliseconds, a lowercase “x” will return the timestamp in miliseconds, whereas, a capital “x” will return the timestamp in seconds. An example of each is below.
moment().format("x") //milliseconds
moment().format("X") //secondsThank you for reading this article, I’m hoping on expanding more on Moment in another article as there is so much you can do with it :) and again if you have any criticisms or feedback suggestions then I’m happy to received them and learn from them, now it’s “time” to publish this article!
