This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    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.

    >15.4.2 <16.3.2


    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


    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 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 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 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.