headzoo/react-moment headzoo/react-moment

  • Stars
    star
    517
  • Rank 85,558 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated almost 2 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
headzoo/react-moment
github

headzoo

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React component for the moment date library.

react-moment

React component for the moment date library.

Build Status Coverage Status NPM Downloads MIT License

Installing

Node 8 or greater is required. 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';

export default class MyComponent extends React.Component {
    render() {
        return (
            const 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';

export default class MyComponent extends React.Component {
    render() {
        return (
            const 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';

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

Props

The component supports the following props. See the Moment docs for more information.

Interval

interval={number}

By default the time updates every 60 seconds (60000 milliseconds). Use the interval prop to change or disable updating.

Updates the time every 30 seconds (30000 milliseconds).

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment interval={30000}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Disables updating.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment interval={0}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Formatting

format={string}

Formats the date according to the given format string. See the Moment docs on formatting for more information.

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

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

Outputs:

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

For Duration and DurationFromNow formatting, the formatting is done using a separate library. See the Moment-Duration-Format docs on formatting for more information.

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

export default class MyComponent extends React.Component {
    const start = moment().add(-4, 'm');
    render() {
        return (
        <Moment date={start} format="hh:mm:ss" durationFromNow />
        );
    }
}

Outputs:

<time>00:04:00</time>

Trim

trim={string|bool}

When formatting duration time, the largest-magnitude tokens are automatically trimmed when they have no value. See the Moment-Duration-Format docs on trim for more information.

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

export default class MyComponent extends React.Component {
    const start = moment().add(-4, 'm');
    render() {
        return (
        <Moment date={start} format="hh:mm:ss" trim durationFromNow />
        );
    }
}

Outputs:

<time>04:00</time>

Parsing Dates

parse={string}

Moment can parse most standard date formats. Use the parse attribute to tell moment how to parse the given date when non-standard. See the Moment docs on parsing for more information.

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

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

Add and Subtract

add={object}

subtract={object}

Used to add and subtract periods of time from the given date, with the time periods expressed as object literals. See the Moment docs on add and subtract for more information.

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

export default class MyComponent extends React.Component {
    render() {
        const date = new Date();

        return (
            <div>
                <Moment add={{ hours: 12 }}>{date}</Moment>
                <Moment add={{ days: 1, hours: 12 }}>{date}</Moment>
                <Moment subtract={{ hours: 12 }}>{date}</Moment>
                <Moment subtract={{ days: 1, hours: 12 }}>{date}</Moment>
            </div>
        );
    }
}

From Now

fromNow={bool}

Sometimes called timeago or relative time, displays the date as the time from now, e.g. "5 minutes ago".

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

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

Outputs:

<time>40 years ago</time>

Including ago with fromNow will omit the suffix from the relative time.

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

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

Outputs:

<time>40 years</time>

From Now During

fromNowDuring={number}

Setting fromNowDuring will display the relative time as with fromNow but just during its value in milliseconds, after that format will be used instead.

From

from={string}

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

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

Outputs:

<time>39 years</time>

To Now

toNow={bool}

Similar to fromNow, but gives the opposite interval.

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

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

Outputs:

<time>40 years ago</time>

To

to={string}

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

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

Outputs:

<time>39 years</time>

Filter

filter={function}

A function which modifies/transforms the date value prior to rendering.

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

export default class MyComponent extends React.Component {
    render() {
        const toUpperCaseFilter = (d) => {
            return d.toUpperCase();
        };

        return (
            const dateToFormat = '1976-04-19T12:59-0500';
            <Moment filter={toUpperCaseFilter}>{dateToFormat}</Moment>
        );
    }
}

Outputs:

<time>MON APR 19 1976 12:59:00 GMT-0500</time>

With Title

withTitle={bool}

Adds a title attribute to the element with the complete date.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment format="D MMM YYYY" withTitle>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Outputs:

<time title="1976-04-19T12:59-0500">19 Apr 1976</time>

Title Format

titleFormat={string}

How the title date is formatted when using the withTitle attribute.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment titleFormat="D MMM YYYY" withTitle>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Outputs:

<time title="19 Apr 1976">1976-04-19T12:59-0500</time>

Difference

diff={string}

decimal={bool}

unit={string}

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <div>
              <Moment diff="2015-04-19">1976-04-19T12:59-0500</Moment>
              <Moment diff="2015-04-19" unit="days">1976-04-19T12:59-0500</Moment>
              <Moment diff="2015-04-19" unit="years" decimal>1976-04-19T12:59-0500</Moment>
            </div>
        );
    }
}

Duration

duration={string}

date={string}

Shows the duration (elapsed time) between two dates. duration property should be behind date property time-wise.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment duration="2018-11-1T10:59-0500"
                    date="2018-11-1T12:59-0500"
            />
        );
    }
}

Duration From Now

durationFromNow={bool}

Shows the duration (elapsed time) between now and the provided datetime.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment date="2018-11-1T12:59-0500"
                    durationFromNow
            />
        );
    }
}

Unix Timestamps

unix={bool}

Tells Moment to parse the given date value as a unix timestamp.

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

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

Outputs:

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

Local

local={bool}

Outputs the result in local time.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment local>
                2018-11-01T12:59-0500
            </Moment>
        );
    }
}

Outputs:

<time>Thu Nov 01 2018 18:59:00 GMT+0100</time>

Timezone

tz={string}

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

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

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

Outputs:

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

Calendar

calendar={object|bool}

Customize the strings used for the calendar function.

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

export default class MyComponent extends React.Component {
    render() {
        const calendarStrings = {
            lastDay : '[Yesterday at] LT',
            sameDay : '[Today at] LT',
            nextDay : '[Tomorrow at] LT',
            lastWeek : '[last] dddd [at] LT',
            nextWeek : 'dddd [at] LT',
            sameElse : 'L'
        };

        return (
            <Moment calendar={calendarStrings}>
                '1976-04-19T12:59-0500'
            </Moment>
        );
    }
}

Locale

locale={string}

Sets the locale used to display the date.

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

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

Note In some cases the language file is not automatically loaded by moment, and it must be manually loaded. For example, to use the French locale, add the following to your bootstrap (e.g. index.js) script.

import 'moment/locale/fr';

Element

element={string|React.Component}

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

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

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

Outputs:

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

OnChange

onChange={func}

The onChange prop is called each time the date is updated, which by default is every 60 seconds. The function receives the new date value.

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment onChange={(val) => { console.log(val); }}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}

Other Props

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

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

export default class MyComponent extends React.Component {
    render() {
        return (
            <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>

Pooled Timer

By default a timer is created for each mounted <Moment /> instance to update the date value, which is fine when you only have a few instances on the page. However, performance can take a hit when you have many mounted instance. The problem is solved by using a pooled timer.

When pooled timing is enabled, react-moment will only use a single timer to update all mounted <Moment /> instances. Pooled timing is enabled by calling startPooledTimer() and stopped by calling clearPooledTimer().

Call the startPooledTimer() static method from your bootstrapping script (usually index.js) to initialize the timer.

import React from 'react';
import ReactDOM from 'react-dom';
import Moment from 'react-moment';
import App from './components/app';

// Start the pooled timer which runs every 60 seconds
// (60000 milliseconds) by default.
Moment.startPooledTimer();

// Or set the update interval. This will update the mounted
// instances every 30 seconds.
// Moment.startPooledTimer(30000);

ReactDOM.render(<App />, document.getElementById('mount'));

Note: The interval prop set on each <Moment /> instance is ignored when using pooled timing, except where interval={0} to disable updating.

Note: The startPooledTimer() method must be called before any <Moment /> instances are mounted.

Global Config

Some prop values may be set globally so you don't have to set them on every react-moment instance.

  • globalMoment
  • globalLocale
  • globalFormat
  • globalParse
  • globalFilter
  • globalElement
  • globalTimezone
  • globalLocal
import React  from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment/min/moment-with-locales';
import Moment from 'react-moment';

// Sets the moment instance to use.
Moment.globalMoment = moment;

// Set the locale for every react-moment instance to French.
Moment.globalLocale = 'fr';

// Set the output format for every react-moment instance.
Moment.globalFormat = 'D MMM YYYY';

// Set the timezone for every instance.
Moment.globalTimezone = 'America/Los_Angeles';

// Set the output timezone for local for every instance.
Moment.globalLocal = true;

// Use a <span> tag for every react-moment instance.
Moment.globalElement = 'span';

// Upper case all rendered dates.
Moment.globalFilter = (d) => {
    return d.toUpperCase();
};

const App = () => (
    <Moment>1976-04-19T12:59-0500</Moment>
);

ReactDOM.render(<App />, document.getElementById('mount'));

You can override the global values on a per-instance basis using regular props.

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

// Set the locale for every react-moment instance to French.
Moment.globalLocale = 'fr';

const App = () => (
    <div>
        {/*
            Renders using the 'fr' locale due to the global setting.
        */}
        <Moment>1976-04-19T12:59-0500</Moment>

        {/*
            Overrides the global locale and uses 'en' instead.
        */}
        <Moment locale="en">1976-04-19T12:59-0500</Moment>
    </div>
);

ReactDOM.render(<App />, document.getElementById('mount'));

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 element={Text} >1976-04-19T12:59-0500</Moment>

License

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

Contributors

More Repositories

1

surf

Stateful programmatic web browsing in Go.
Go
1,485
star
2

bitcoin-wallet-api

PHP library supporting communication with the Bitcoin JSON-RPC API.
PHP
35
star
3

polymer-bundle

Symfony bundle and Twig extension for developing and deploying Polymer web components.
PHP
11
star
4

node-mogile

A simple node.js module for MogileFS
JavaScript
6
star
5

service-thumbnails

Used to create video thumbnails.
Go
4
star
6

etcdsh

An interactive shell for the etcd server.
Go
4
star
7

ruqqus-plus

Enhancements for ruqqus.com
JavaScript
4
star
8

bitcoin-tools

Small library used to work with Bitcoin.
PHP
4
star
9

discuit-client

A simple, lightweight, and easy to use Discord API wrapper for Node.js and browser.
TypeScript
2
star
10

react-headzoo-emoji

React component wrapper for the twemoji library which converts unicode emoji into images.
JavaScript
2
star
11

ut

Go unit testing library.
Go
2
star
12

statsx

Go
1
star
13

dbsample

DBSample creates small samples of large databases while preserving foreign key constraints.
Go
1
star
14

deskpro-api-es6-client

JavaScript
1
star
15

forget

A bitly Forgettable (goforget) client library for the Go (golang) programming language.
Go
1
star
16

puppet

JavaScript
1
star
17

deskpro-sdk-react

JavaScript
1
star
18

react-afac

Another Font Awesome Component.
JavaScript
1
star