Why Moment.js is super helpful for making apps

As some of you may know, I’ve been on the job search. Recently I was interviewing with a certain company and I received a take home assignment from them. I’m not going to share any specifics because these take home assignments are private, however I can give a broad over view. For the take home I was assigned an incomplete frontend app and was given a sprint sheet. The sprint sheet contained a number of tasks that needed to be completed to add features or fix bugs in the app. One of those features was to add a date to the bottom of a post. I’m going to show y’all how I formatted the date easily to change it from the standard JS Date UTC format to “Month Day, Year” in vanilla JS using moment.js!

The date needed to be in the format you see above. In order to get to that point I first started by viewing the data. I did this with…

console.log(date);

This let me see what I was working with. The data ended up being in the standard UTC new Data JavaScript format. It looked similar to this…

So I needed to convert it. How did I do it? with moment.js!

To use moment.js you can install it by either adding the script to the index.html file you’re manipulating or by installing it in the package.json file.

Adding the Script

If you want to go this route just navigate to the index.html file you’re manipulating and add this <script> tag inside the body of the file…

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>

This will allow you to use moment.js in your JavaScript files.

Installing moment.js

Alternatively, you can add and start using moment.js by importing the library. cd into your working directory via the terminal and run…

npm install moment

This should install the package in your package.json file, now you need to do one more thing to use it. You need to require moment at the top of the .js file you want to use it in like so…

var moment = require('moment'); // require

If you need anymore information on moment you can view the official documentation here.

Final Step

Now that you have moment installed you just need to use it! Here’s how I implemented it in my take home…

The date then turned into…

July 29, 2021

Which is exactly what we needed!

If you need a boilerplate for how to use moment.js…

var convertedDate = moment(dateToBeConverted).formate('desired formatting');

I would highly suggest using the official documentation to view the formats you can use.

And that’s it! I hope this helped someone and Happy Coding!!!!

--

--

--

Aspiring Software Developer, Anime nerd and lifter of heavy weight in competition

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to embed PDF viewer in your web application in Chrome and FireFox Browser.

How to connect MongoDB?

React to async/await

Why is customer acquisition a wrong metric for measuring Growth ?

Master SEO and meta in @vue/cli projects

Concepts That Every React Native Developer Should Know

Git co commit getting started

Git co commit

Create Text Recognition Mobile Application with Google Cloud Vision

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Emrich-Michael Perrier

Emrich-Michael Perrier

Aspiring Software Developer, Anime nerd and lifter of heavy weight in competition

More from Medium

How to Display a Current Date in Various Format in JavaScript

Javascript arrow functions is a topic of importance and the best part is it’s very easy to…

How to use face-api in React

Heroes and Smilestones | Sun Nov 21, 2021

Smilestones App Logotype Concept 1