Adding a Calendar and Reformatting Datetime in React

While working on my final project for Flatiron School, I found myself creating a web application whose main focus revolves around creating events. While it may seem easy, working with dates in JavaScript can be a bit tricky and extremely annoying without the help of external packages. Luckily for us, they do exist and make things a whole lot easier when it comes to sending date formats to a backend and rendering those dates in the proper format on the frontend.

React Date Picker

Lets start by giving a user the ability to select a date from a calendar. Thanks to React Date Picker, adding a calendar for selecting a Date is easy.

First we install the package.

npm install react-datepicker --save

Now, depending on which component we want to render our Calendar, we import the package and some CSS it provides to make it look nice.

import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

Finally, when it’s time to display out Calendar, We can call DatePicker in our component, same as we would any other component. However, when we call it, we have to give it some props for actually setting the date and showing which one is selected. Since were using this date as part of an input on your form, we do what we would for any form in react, adding a useState hook for setting a date and using the date as a value, when doing so, it also import to set the inital value of state to new Date, so JavaScript knows that you are about to give it a date as an input. Now we pass in an onChange prop for setting our newDate state, a selected prop that is the value of the newDate we selected, and to keep this as a controlled form, we also give it a value, set equal to our newDate.

And now you should have a fully functioning calendar displaying on your page. However, since our app focuses around date & time, theres a few extra steps we must take. One route is to install and another package called React Time Picker, which follows the same steps for creating a time selector. Another route we could take, and the main reason I chose the Date Picker package, is to use a few props from it’s props list to add a Time Picker to our calendar. If we go through there list of props, we can use one called showTimeSelect(and a few others to clean up the output)

and as a result, we now have something that looks like this!

Moment

Now lets go in reverse. Say we have a date already and are looking to display that date on our page. A problem you may find yourself running into is that the format of the date isn’t as user friendly as you might hope. When using Rails as an api, any datetime type is going to be formatted in UTC, which isn’t the pretty way we want to display the Date and Time of our event. To reiterate, working with times in vanilla JavaScript can be a nightmare, but thanks to Moment.js things get a whole lot easier. Moment has been around for a while and is always the first package you will hear about when working with Times in JavaScript.

First we install Moment.

npm install moment

Next, we import it to the component where we are rendering the date.

import moment from 'moment';

and now we can call moment on any date in UTC and have it display in any way we want, depending on the Moments list of methods, and since we are sending our date in from a calendar, I feel it’s only right to display it using the calendar format. An example of this would look like this.

moment("your UTC formatted date").calendar()

And now your Date & Time should be displaying and actually legible. For a while before this, I was using regular string text inputs to represent Dates and Times, but now, with the help of these packages I can now more confidently work with times.