react-moment

React component for the moment date library.

• Installing
• Timezone Support
• Quick Start
• Formatting
• Parsing Dates
• From Now
• From
• To Now
• To
• Unix Timestamps
• Timezone
• Locale
• As
• Other Props
• Usage with React Native
• License
• Contributors

Installing

Use npm to install react-moment along with its peer dependency, moment.

npm install --save moment react-moment

Timezone Support

The moment-timezone package is required to use the timezone related functions.

npm install --save moment-timezone

Then import the package into your project.

import React from 'react';
import Moment from 'react-moment';
import 'moment-timezone';

export default class App extends React.Component {
    ...
}

Quick Start

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = '1976-04-19T12:59-0500';
        <Moment>{dateToFormat}</Moment>
    }
}

Outputs:

<time>Mon Apr 19 1976 12:59:00 GMT-0500</time>

The above example could also be written this way if you prefer to pass the date using an attribute rather than as a child to <Moment>.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = '1976-04-19T12:59-0500';
        <Moment date={dateToFormat} />
    }
}

The date value may be a string, object, array, or Date instance.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = new Date('1976-04-19T12:59-0500');
        <Moment date={dateToFormat} />
    }
}

Formatting

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment format="YYYY/MM/DD">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>1976/04/19</time>

Parsing Dates

Moment can parse most standard date formats. Use the parse attribute to tell moment how to parse the given date when non-standard.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment parse="YYYY-MM-DD HH:mm">1976-04-19 12:59</Moment>
    }
}

From Now

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment fromNow>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>40 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment fromNow ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>40 years</time>

From

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment from="2015-04-19">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>39 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment from="2015-04-19" ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>39 years</time>

To Now

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment toNow>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>40 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment toNow ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>in 40 years</time>

To

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment to="2015-04-19">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>39 years</time>

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment to="2015-04-19" ago>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time>in 39 years</time>

Unix Timestamps

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let unixTimestamp = 198784740;
        <Moment unix>{unixTimestamp}</Moment>
    }
}

Outputs:

<time>Mon Apr 19 1976 12:59:00 GMT-0500</time>

Timezone

To enable server side rendering (SSR), client and server has to provide same datetime, based on common Timezone. tz attribute will enable set the common timezone.

import React  from 'react';
import Moment from 'react-moment';
import 'moment-timezone';

exports default class MyComponent extends React.Component {
    render() {
        let unixTimestamp = 198784740;
        <Moment unix tz="America/Los_Angeles">{unixTimestamp}</Moment>
    }
}

Outputs:

<time>Mon Apr 19 1976 09:59:00 GMT-0800</time>

Locale

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        let dateToFormat = '1976-04-19T12:59-0500';
        <Moment locale="de">{dateToFormat}</Moment>
    }
}

as

An element type to render as (string or function).

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment as="span">1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<i>Mon Apr 19 1976 12:59:00 GMT-0500</i>

Other Props

Any other properties are passed to the <time> element.

import React  from 'react';
import Moment from 'react-moment';

exports default class MyComponent extends React.Component {
    render() {
        <Moment className="datetime" aria-hidden={true}>1976-04-19T12:59-0500</Moment>
    }
}

Outputs:

<time class="datetime" aria-hidden="true">Mon Apr 19 1976 12:59:00 GMT-0500</time>

Usage with React Native

If you are using React Native then you'll have to pass in Text.

import Moment from 'react-moment';
import { Text } from 'react-native';

Then:

<Moment as={Text} >1976-04-19T12:59-0500</Moment>

License

This software is released under the MIT license. See LICENSE for more details.

Contributors

• markacola
• nclavaud
• Idan Gozlan
• Oliver Vartiainen
• a-x-
• khell
• ali-master
• tujoworker