1×

10s

25s

Download in HD

Become a member

to unlock all features

Create an egghead account to access 5000+ tutorials and resources from expert developers.

Create account

Gatsby Theme Authoring

Autoplay

Style and Format Dates in React

Jason Lengstorf

React

The Event Page is looking pretty good. But we can do better.

The date currently comes from a query that gets the start and end date as props and dumps that data out in a <p> tag.

In this lesson, we'll add some custom logic to display the date of an Event how you would expect it.

For a written version of this course, check out the Gatsby docs.

In this lesson we learn how to make the event dates more human readable.

⚡ Setting up the date component

We're now going to take a look at styling and formatting dates in React.

At the moment, we are currently displaying the date by separating the startDate and the endDate with a hyphen, but this isn't ideal.

We're going to refactor the Event component to improve the way that the date is displayed.

If the event is one day, we want it to display like June 21 2019
For events spanning multiple days, we want the date to look like June 21-23 2019
If the event spans across months, we want it to look like June 30-July 2 2019

To get started, we'll create a helper function getDate. That will take in our date, and we're going to pass in an object saying whether or not we want to show the day, month and year. All of those will default to true.

src/components/event.js

javascriptconst getDate = (date, { day = true, month = true, year = true } = {}) =>
  date.toLocaleDateString("en-US", {
    day: day ? "numeric" : undefined,
    month: month ? "long" : undefined,
    year: year ? "numeric" : undefined,
  })

Now we can use this helper function back inside of our EventDate component.

Inside of the time tag, we'll call the function with the start date and tell it we only want to show the year if it's a one day event. We can also pass the start date to the time dateTime attribute.

jsconst EventDate = ({ startDate, endDate }) => {
  const start = new Date(startDate)
  const end = new Date(endDate)
  const isOneDay = start.toDateString() === end.toDateString()
  return (
    <>
      <time dateTime={start.toISOString()}>
        {getDate(start, { year: isOneDay })}
      </time>
      {!isOneDay && (
        <>
          –
          <time dateTime={end.toISOString()}>
            {getDate(end, { month: start.getMonth() !== end.getMonth() })}
          </time>
        </>
      )}
    </>
  )
}

We can now refactor our Event component to include EventDate:

javascriptconst Event = ({ name, location, url, startDate, endDate }) => (
  <div>
    <h1>{name} ({location})</h1>
    <p>
      <EventDate startDate={startDate} endDate={endDate} />
    </p>
    <p>
      Website: <a href={url}>{url}</a>
    </p>
  </div>
)

We can now view our pages on localhost:8000 and see that our one day, multiple day, and multiple month event dates are being displayed correctly.

One Day

One day event date format

Multiple Day

Multiple day event date format

⚡ Issues I Faced

For me personally, the dates for multiple day events were not displaying as they did in the video. For example, on the DinosaurJS page, the date was displayed as

June 20-2019 (day:21)

instead of

June 20-21 2019

This may be due to a change in toLocaleDateString() or due to my own personal settings. If you also encounter this issue and have an easy fix, please feel free to contribute!

Resources

✏️ Edit on GitHub

Instructor: Right now, the date, but it doesn't look great. The date currently comes from a query that looks for the start date and the end date. This is then passed into our Event component. Inside the Event component, we get the start date and end date as props which we then just set next to each other, so the start date and en dash and then the end date.

While this is fine, it's not ideal. We're going to refactor this component with a little bit of business logic to read those dates and display them in a way that's a little more human-readable.

We'll start out by saying let's create a new component called EventDate. This one is going to take a start date and an end date. First, we're going to turn in each of these into a new Date object. We'll send in start date. We'll get the end. We'll turn that into a Date object.

Then we're going to do a check to see if it's a one-day event, so if it happens on the same day. One example of this is -- let's see -- this one here. This one happens on the same day. We can go say if it's one day, we'll say start.toDateString equals end.toDateString.

Then we can return a component. We'll use a fragment to make sure that we're not generating any junky markup. We're going to use the Time component with datetime so that it's machine-parsable. That's going to need to contain something. Then this one is going to need to contain the actual date.

The way that we want this to work is, in pseudocode, if it's two days or multiple days, we want it to look something like this, June 21st to 23rd, 2019. It'll look something like that. If it's one day, we want it to look like this. If it crosses month boundary, so if it was June 30th to July 2nd, we want it to look like that.

We need to add all of that logic. The way that we're going to do that is first we're going to create a little helper function to get our date so that we don't have to have a bunch of duplicate code. We'll do getDate. That's going to accept our date.

Then we're going to say whether we want the day, which will default to true, the month, which will also default to true, and the year, which will default to true. We'll also make sure that if you don't pass in an argument, it'll default to an empty object, which means everything will be true.

What we're going to give back is the toLocaleDateString. That's going to be in the US locale. We'll say the day is going to be day. It's either numeric, or if day is false, it'll be undefined. We'll do the same thing for the year. For the month, it's going to be long if it's not undefined.

Then, down in this time, we can set it up to say we want to get date using start. We will say only show the year if it is one day. For the datetime, we're going to use the start.toISOString. To start, let's use this event date down here. We'll just say event date with a start date of start date and an end date of end date.

This gives us a time datetime. We can see that ISO string comes in here. Because it is one day, this shows us the year. If we go back and look at one that's multi-day, it doesn't show us the year. We want to finish that out now by getting the rest of these.

We'll say up here that if it's not one day, then we will use another fragment. Add that en dash. Add another time, the datetime. This one is going to be the end.toISOString. We will getDate using the end. The month will be if the start.getMonth does not the end.getMonth, then we want to show the month.

This basically says only show the month if the start month and the end month are different. I need to add in my last fragment. If I save that, then when I come back out, I can see we've now got June 20th to 21st. Perfect.

If we go back to the main list, we can see that that is working properly. For a one-day conference, it gives us what we want. That puts us in good shape. We're looking pretty good here.