Install and Configure the Entry Point of react-intl

Convert a Hard Coded String using react-intl FormattedMessage

Render Content with Placeholders using react-intl FormattedMessage

Render Content with Markup Using react-intl FormattedHTMLMessage

Format Date and Time Using react-intl FormattedDate and FormattedTime

Format a Date Relative to the Current Date Using react-intl FormattedRelative

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

Render Content Based on a Number using react-intl FormattedMessage

Use a react-intl Higher Order Component to format messages and get current locale

Write tests for react-intl output using enzyme and Jest

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

Add Internationalization (i18n) to a React app using React Intl

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.

https://app.egghead.io/api/v1/lessons/react-format-date-and-time-using-react-intl-formatteddate-and-formattedtime/subtitles

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

Format Date and Time Using react-intl FormattedDate and FormattedTime

Share this video with your friends

Course

Add Internationalization (i18n) to a React app using React Intl