What Time is it in Wakanda? A Beginner’s Only Guide to Using Moment.js
Let’s start off with with an important statement:
I do realize that Wakanda is not a real place. As much as I wished it were, I used the time in Kenya as a placeholder. Wakanda should be in East Africa, but the exact location is subject to much speculation with some references noting that the paradise is somewhere between South Sudan, Uganda, Kenya, and Ethiopia. With that said, here is the website I have built for the context of learning (screen capture below), and here are the files on GitHub.
What is Moment.js and Why You Should Care
Moment.js is a library (or pre-written code) that works with JavaScript so that you can easily display, manipulate and validate dates including times. This includes local languages, formats, and time zones, just like in my Wakanda example. Since this is an introduction to moment.js, I’m not going to cover parsing and validating dates — those will be future topics, but once you understand how moment.js works at its most basic level, learning more advanced topics will naturally be easier, and you will see the patterns in the way the code is constructed. You might be asking yourself, doesn’t JavaScript have a way of working with dates? It does, but Moment.js focuses solely on the purpose of making working with dates (and times) super convenient. JavaScript doesn’t have that luxury, and therefore when needing more complex functionality, JS can be cumbersome.
Getting Started
Since we are using a library, I recommend that you download the code directly from moment.js. On their homepage, you are given a choice of files. If you are going to use moment.js for manipulating and displaying local languages and formats, then you want the file called moment-with-locales.js. If not, you can just use the standard moment.js file.
Click on the file you need, copy and paste ALL of the code into a fresh new page in your text editor, and save it as a JS file. Now, add this file to any project you are working on just as you would for your main JS code.
Displaying Dates
Moment.js code, just like many other libraries (prewritten code), starts with a self-referential snippet:
For readability and ease of future use, I prefer to put everything in a variable. So the above snippet becomes:
With that one line of code, you have the entire date object available to you, and you can choose any way you want to display it by adding a format method to it. The basic code looks like this:
The above line of code says that I took that variable with the date and time object in it and added a format method to it (.format()). Since I want the computer to display the the time in this specific way, I passed the display into the parameters of the format method. Right now, though, that line of code isn’t really doing anything except being a container because I haven’t told it where that format display should go. I still need to update it on the website. Your code should do two things: find the element where the date is going to be displayed in the HTML and then format the date the way you want. Something like this:
Go ahead…. look at the first date display on the Wakanda website to see how this worked (screen shot below).
I displayed the full month name here, but I could have easily written a single M instead of MMMM which would give me a number output rather than the string (see above code). I could have added elements like week of the year (“wo”) or quarter of the year (“Qo”). Moment.js has an entire page worth of possible format combinations available in the documentation. Something to note is that the comma in the code that appears on my Wakanda website (between Monday and July), is my comma. If you want punctuation in your format, you will need to insert it.
Displaying Time
Wasn’t that easy?
Inserting the time is just as simple. Here’s what it looks like for the Wakanda page:
We still have to add that format display to the website. Your code should do two things: find the element where the time is going to display in the HTML and then format the time the way you want. Something like this
Again, notice that I added the colons to the time format parameters in the above code.
Go Rogue
The truth is that you can display the date and time anyway you want (as long as it is supported by moment.js), so I added a third display section on the Wakanda website. What do you think the “Z” stands for… guess…
…if you guessed time zone, you would be correct.
Locale and Time Zones
We’ve already established that Wakanda is fictional.
But what if as a developer you need to display dates in other languages and local formats? Moment.js supports a number of locales as listed on their homepage. Just as format was a method, so is locale, and it simply allows you to change the language. The below code says that we are using English, but I could substitute the “en” for “ja” (Japanese) or “de” (German) or any other supported language code. Look up the language code you need here.
But just for fun… Here’s what would happen if I swapped out the “en” for “de”:
I set the website to time in Wakanda (okay, Kenya), but I’m coding it on the East Coast of the US, how did I change the time zone? Start with UTC (Universal Time Coordinated), a standard global universal clock. Your local time will either add or subtract hours and minutes to the UTC relative to your distance to the base time of the clock which is Greenwich, England. To ensure I display the right time, I’m going to take the first line of my code, where I grabbed the date object and add a utcOffset method. The parameter in the method is +3:00 for the update to the time in Kenya.
Now What?
It is always easier to learn something new within the context of something you already know. That is why I strongly suggest one of two things for your next steps. 1. Take a website you have already built and add a date display somewhere on the page. Make sure you practice with different format options. 2. Think of another location and build something unique for yourself. Maybe you want to display the time at the Durmstang Institute from the Harry Potter universe or Hobbiton in Middle Earth.
Your are developer. If you can dream it, you can build it. And when you build it — please share it with me!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
