Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-intl-datetime-format with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactIntlDatetimeFormat = require("react-intl-datetime-format")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-intl-datetime-format v1.0.3

Date and time formatter based on the ECMAScript Internationalization API


npm version Build Status Codecov Coverage License: MIT

Tiny React component wrapping the ECMAScript Internationalization API with sane defaults to format dates and times.

To see in detail the component DateTime with the list of props and examples please check the documentation site.

You can also play with react-intl-datetime-format in a CodeSandbox.


  • Effortless format dates and times for different locales
  • Possibility to use strings, Unix timestamp or Date instances to format a date
  • Relies in the standard Intl.DateTimeFormat constructor
  • Possibility to use it as an standalone React Component using props to configure it
  • Possibility to use a general config using a React Context Provider
  • Detects automatically the browser language as a default locale
  • Exposes a function to update the Provider config
  • Ability to render a date or a time with any html tag
  • Props match Intl.DateTimeFormat constructor arguments



npm i react-intl-datetime-format


This is the easiest way to use Date formatter component:

import { DateTime } from "react-intl-datetime-format"

// renders 12/3/1983
const Foo = () => <DateTime locale="en-US">03 dec 1983</DateTime>

// renders the current formatted date guessing the locale from the browser
const Bar = () => <DateTime />

You don't even need to pass a locale prop, by default it will try guess the locale from the browser.

Recommended usage with a React Context Provider

The recommended way to use it would be with a Context.Provider, this will allow you to have a global configuration so you don't need to pass props every time you format a date or time.

A provider IntlProvider is exposed with a default config, but you can you set your own config and use it in your App component.

// In your App.js or similar...
import { IntlProvider } from "react-intl-datetime-format"

const intlConfig = {
  locale: "en-US",
  options: {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    timeZoneName: "short",

const App = () => <IntlProvider config={intlConfig}>...</IntlProvider>

// In any other part of your code
import { DateTime } from "react-intl-datetime-format"

const date = new Date(2012, 11, 20, 3, 0, 0)

const HelloWorld = () => (
  // renders "December 20, 2012, 4:00:00 AM GMT+1" (based on the provider config)

The configuration object that IntlProvider expects is basically matching the arguments from Intl.DateTimeFormat constructor.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free