Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Format Date and Time Using react-intl FormattedDate and FormattedTime

    Damon BauerDamon Bauer

    Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into both a date string and a time string in different language formats.

    reactReact
    15 - 16
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:01 In the bookDetail component, let's import formattedDate and formattedTime from React Intl. We'll use these components to render the date of the user's review. If we take a look at our sample book.json data, at the date for each person's review, you'll notice that it's one long number.

    00:25 This is an instance of a date represented in a Unix timestamp in milliseconds. Let's get rid of this date that we're displaying currently, and we'll add a formattedDate component.

    00:39 We'll provide a value prop, into that we'll create a new date and pass it review.date. So formattedDate takes a number of arguments, but we'll look at just a few. We'll set a year prop to numeric, I'll just go ahead and set the rest as well, so I'll say month='numeric', and day='numeric'.

    01:07 Notice that our dates are formatted in the correct locale format. To change that date format, let's change some of these props. We'll say month is no longer numeric, but we'll say long. Now we get the long month name in each of the different languages, but for this app I'll change everything to two digit.

    01:28 Now let's take a look at formattedTime. Recall that review.date was an instance of a date that included the time down to the millisecond, so using that information React Intl can render all of the date information that we provide it.

    01:49 I'll comment out formattedDate and I'll add formattedTime. Again, I'll provide a prop of value and pass a new date constructor with review.date as the value. By adding the same two-digit props for year, month, and day, we get a nice formatted date with the time added in each of the different languages.

    Discuss

    Discuss