rdb-academy-moment

react-moment

React component for the moment date library.

• Installing
• Quick Start
• Formatting
• Parsing Dates
• From Now
• From
• To Now
• To
• Unix Timestamps
• Timezone
• Locale
• Other Props
• License
• Contributors

Installing

Use npm to install react-moment, along with its peer dependencies, moment and moment-timezone.

npm install --save moment moment-timezone react-moment

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';
 
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>
    }
}

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>

License

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

Contributors

• markacola
• nclavaud
• Idan Gozlan
• Oliver Vartiainen