Using a third-party JavaScript library - Moment.js

Linked Projects:

Calreact
 
Correction Note: The best practice is to store third-party JavaScript and CSS files in the vendor/assets directory, not the app/assets directory as shown in this video.

Lesson links:

Lesson code - https://github.com/learnetto/calreact/tree/lesson-3.5

Moment.js - https://momentjs.com/

The next thing we're gonna do is format these dates so that they look more readable.

We're going to use the Moment.js library.

It's a very handy library that gives you nice, simple methods, to deal with dates easily.

Let's download it and save it to our assets/javascripts/ directory.

Then we'll include it in our application.js file, just above our components. 

Then we can use it in our appointmen component, by wrapping this with moment and then we'll say dot format month, day, year, and time, with AM or PM. 

Now let's refresh the page and our dates are nicely formatted. 

Let's clean this up a little bit, and move it to a separate utility method.

We'll put it in a new utils.js file, and we'll call the method formatDate, which will take the date d, and return the moment-formatted date.

Then we can simply call this formatDate.

Ok, that's a bit cleaner.

Now refresh and check if it still works.

Cool, so we formatted our dates.

Next, we're gonna add an interactive date-picker widget for choosing the appointment date and time.

Liked this tutorial? Get more like this in your inbox