headzoo/react-moment

React component for the moment date library.

react-moment's Issues

Missing Type Definitions

Looks like subtract and add are missing from the TypeScript definitions file.

So these features cant be used in a TS project without throwing errors.

(Great project BTW, appreciate the work)

moment().from() / moment.to() Boolean parameter

Hey, first of all thanks for this great package! :)

I can't seem to figure out how to pass the optional Boolean parameter to the from and to properties, which allows for disabling the "in" or "ago" text and just gives the time from/to eg. "5 Years" vs "5 Years ago".

example from moment's documentation end.from(start, true); // "5 days"

Is this possible after all?

Thanks
Daniel

error 'define' is not defined no-undef on create-react-app

Timezone feature is missing

Timezone feature will assist figure out server side rendering breaking.
Right now, if server and client are not synced, server side rendering is broken.

The solution is to add a feature of specific client time zone for parsing the timestamps.

Using locale yields an error

Example:

import React from 'react'
import Moment from 'react-moment';
import 'moment/locale/fi';

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

Yields an error:

ncaught TypeError: Cannot read property 'preparse' of null
    at prepareConfig (from-anything.js?ede6:43)
    at createFromConfig (from-anything.js?ede6:22)
    at createLocalOrUTC (from-anything.js?ede6:109)
    at createLocal (local.js?8ec1:4)
    at hooks (hooks.js?38d9:6)
    at Function.value (index.js?948d:1)
    at t.value (index.js?948d:1)
    at t.value (index.js?948d:1)
    at eval (ReactCompositeComponent.js:347)
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)

No errors if I leave out the locale.

For the webpack config I'm using this definition to avoid the error

Module not found: Error: Can't resolve './locale'

object-assign polyfill doubles dist/index.js filesize

dist/index.js is 17kb, where only half of it is the actual source. Seems like object-assign gets bundled, it should be up to the project using react-moment to polyfill Object.assign if they want to

Some devDependencies appear in dependencies

Version 0.7.3 introduces some devDependencies in dependencies list

"istanbul": "^0.4.5",
"istanbul-api": "1.2.2",
"istanbul-reports": "1.1.4",
"jest": "^22.4.2"

package.json v0.7.3 https://unpkg.com/[email protected]/package.json
package.json v0.7.2 https://unpkg.com/[email protected]/package.json

Expected: Those 4 dependencies should not be listed in dependencies of package.json
Actual: They do

Content does not update when props are updated

My use-case consists of a container component passing state as props to a <Moment /> component.

I noticed the content (displayed date) is not updated when the new props have been received. I have to wait until the next interval callback is triggered to see the content update.

Will submit a PR.

Node has not been attached to a view

Getting the following error "Node has not been attached to a view" here is my code
Lastest react native version

<View style={styles.headerView}>
                    <Text style={styles.headerText}>{this.props.title}</Text>
                    {photoDate != null &&
                    <Text style={styles.headerDateText}>
                        <Moment parse="YYYY-MM-DD HH:mm">
                            1976-04-19 12:59
                        </Moment>
                    </Text>
                    }
                </View>

Missing a way to change the language

You should add a way to change the language of the time strings. Probably a prop in the static function "getDatetime" used to: datetime.locale(prop.locale) before returning.
Something like that:

static getDatetime(props) {
        let {
            date,
            parse,
            utc,
            unix,
            tz,
            locale
        } = props
        date = date || props.children

        let datetime = null

        if (utc) {
            datetime = moment.utc(date, parse)
        } else if (unix) {
            datetime = moment.unix(date)
        } else {
            datetime = moment(date, parse)
        }
        if (tz) {
            datetime = datetime.tz(tz)
        }
        datetime.locale(locale ? locale : (window.navigator.userLanguage || window.navigator.language))

        return datetime
    }

Support for local property

Hi, this component does not seem to have support for the standard moment is "local" property. Is there a way to achieve the following using your component?

var now = moment.utc('2017-10-06T17:27:57').local().
format();

Add or substract?

Hello,

First of all, thanks for this lib!

I wonder how can I add or substract days/hours from current date?

Thanks

Element are not removed from pooledElements

When component is unmount, it is not remove from pooledElements array.

I suggest something like add (not tested):

static removePooledElement(element) { const index = Moment.pooledElements.indexOf(element); if (index !== -1) { Moment.pooledElements.splice(index, 1); } }

and on:
clearTimer = () => { if (!Moment.pooledTimer && this.timer) { clearInterval(this.timer); this.timer = null; } if (Moment.pooledTimer && this.timer) { Moment.removePooledElement(this); } };

Format to Uppercase

Hey there,
is it possible to manipulate the output after it has been parsed by moment? I am using react-moment with react-native and would like to display the date in Uppercase. Unfortunately I can't use CSS for it but have to use JavaScript .toUpperCase() method.

Couldn't find a way to manipulate the output beside the Format Parameter which doesn't help in this case.

how to implement isBetween in react native?

attribute ago is not showing "ago" text

Formatting throws an error

Whenever I try to format a date, an error is thrown:
TypeError: TypeError: this.localeData(...).postformat is not a function.

This happens whenever I use format in the JSX element, or set global format like Moment.globalFormat = 'MM-DD HH:mm'

Any idea what might be causing it? Not specifying a format or not setting globalFormat doesn't throw the error.

Couldn't find preset "es2015" realtive to directory

I get this error after installing react-moment and importing it into my react-native project

TransformError: ../node_modules/react-moment/dist/index.js: Couldn't find preset "es2015" realtive to directory "../node_modules/react-moment"

is this possible with react moment?

Trying to write the equivalent of this line in react for demo data to be used with react highcharts. Not sure if it's possible or what the correct syntax is.

for (var i = 30; i >= 1; i--) {
thisBillingPeriod.push([moment().date(15).subtract(i,'days').valueOf(),(Math.random() * 30) + 80]);
}

I've tried similar variations below but no luck:

const demoDate = new Date();
for (var i = 30; i >= 1; i--) {
thisBillingPeriod.push([<Moment subtract={{days: 1}}>{demoDate},(Math.random() * 30) + 80]);
}

Invariant Violation: View config not found for name RNSVGTSpan

"dependencies": {
"moment": "^2.22.2",
"react": "16.3.1",
"react-moment": "^0.7.7",
"react-native": "0.55.4",
"react-native-svg": "^6.3.1",
"react-native-svg-charts": "^5.2.0"
},

npm WARN [email protected] requires a peer of react@^15.0.0 but none was installed.

Above warning shows when I try to run
npm install --save moment moment-timezone react-moment
in my react-native project. I also can not use (import) moment
What is the problem here ? Am I doing something wrong ?

In my package.json file

"dependencies": {
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"react": "16.0.0-alpha.12",
"react-moment": "^0.2.4",
"react-native": "0.45.1",
}

FromNow/ToNow omitting ago

Hi,

I found some strange behavior which results in wrong output when using FromNow/ToNow including ago to omit the ago suffix. If I don't omit the ago, it displays both "in x days" and "x days ago" when using ToNow. So why do we have both FromNow and ToNow if both doing the same but indicating they're just doing it in one direction? If I omit the prefix it only displays absolut numbers without saying if it is "in x days" or "x days ago" so it may be either one or the other - I simply don't know. To make sure to display that without using a prefix, the number must be positive when having "in x days" and negative when having "x days ago".

Hope you understand my problem
Thanks in advance!

Cant find module error

bundle has warnings:
./~/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale

Moment.startPooledTimer and FromNow doesn't work fine

Hi all,

I get errors when I try to use Moment.startPooledTimer.

In my index.js:
Moment.startPooledTimer(3000);

In my component:
<Moment fromNow>{new Date(this.props.mission.deadline).toISOString()}</Moment>

And the error on my js console:

index.js:1 Uncaught TypeError: Cannot read property 'fromNow' of undefined
    at t.value (index.js:1)
    at index.js:1
    at Array.forEach (<anonymous>)
    at index.js:1

Any idea?

Cannot parse datetime

I have the following date:
"2017-05-16T22:00:00Z"
and use this to parse it:

<Moment tz="Europe/Berlin" locale="de" parse="YYYY-MM-DD HH:mm:ss" >
    { value }
</Moment>)

however invalid date is returned. Any suggestions?

Set default timezone #feature-request

It would be nice to have custom default timezone setting like Moment.globalFormat

Local issue Cannot read property '_abbr' of null

When I use I get this error

Local issue Cannot read property '_abbr' of null #43

Dist version bundles moment

Despite moment being required as a peer dependency, this module will always bundle it's own version of moment when included via webpack etc. Though I don't think it would end up being used, moment is fairly large and bloats the bundle size.

I haven't tested this out for sure, but I'm guessing moment is being required through moment-timezone, so you need to add moment-timezone as a peer dependency, and to the webpack externals configuration to prevent it being bundled.

How to use react-moment with millisecods

Thanks guys for such a great module.

I need to ask, how can i use react-moment with milliseconds instead of timestamps.
for example when i use
<Moment interval={20000} fromNow element={Text} unix>1517895695215</Moment>

i get in 48052 years., instead it should return 7hours (as of writing this question)

Do you want new maintainer?

typings: Missing dependency react-native

The index.d.ts file references the react-native module but this module is not listed as a dependency.

Maybe we could use

import { CSSProperties } from "react";
// ...
style?: CSSProperties,

instead of

import { ViewStyle } from 'react-native';
// ...
style?: ViewStyle,

since react is already listed as a dependency?

Test suite fails when current UTC offset is not -0500

Hi,

Running the test suite here fails:

 FAIL  tests/index.js
  react-moment
    ✕ children (34ms)
    ✕ date (6ms)
    ✕ parse (3ms)
    ✓ format (3ms)
    ✓ fromNow (10ms)
    ✓ from (10ms)
    ✓ toNow (10ms)
    ✓ to (10ms)
    ✓ calendar (3ms)
    ✕ unix (3ms)
    ✓ utc (4ms)
    ✓ other (4ms)

  ● react-moment › children

    expect(received).toEqual(expected)
    
    Expected value to equal:
      "Mon Apr 19 1976 12:59:00 GMT-0500"
    Received:
      "Mon Apr 19 1976 17:59:00 GMT+0000"
      
      at Object.<anonymous> (tests/index.js:26:91)

  ● react-moment › date

    expect(received).toEqual(expected)
    
    Expected value to equal:
      "Mon Apr 19 1976 12:59:00 GMT-0500"
    Received:
      "Mon Apr 19 1976 17:59:00 GMT+0000"
      
      at Object.<anonymous> (tests/index.js:44:91)

  ● react-moment › parse

    expect(received).toEqual(expected)
    
    Expected value to equal:
      "Mon Apr 19 1976 12:59:00 GMT-0500"
    Received:
      "Mon Apr 19 1976 12:59:00 GMT+0000"
      
      at Object.<anonymous> (tests/index.js:56:91)

  ● react-moment › unix

    expect(received).toEqual(expected)
    
    Expected value to equal:
      "Mon Apr 19 1976 12:59:00 GMT-0500"
    Received:
      "Mon Apr 19 1976 17:59:00 GMT+0000"
      
      at Object.<anonymous> (tests/index.js:134:91)

Test Summary
 › Ran all tests.
 › 4 tests failed, 8 tests passed (12 total in 1 test suite, run time 1.077s)

I guess this has something to do with the UTC offset, either the parsing or the formatting.

Interval doesn't seem to do anything

I'm using react-moment in a web page, and while it displays correctly with no errors, it is not updating. Here is the code I'm using:

`import React, { Component } from 'react';
import Moment from 'react-moment';

export default class Clock extends Component {

render(){
    const displayTime = new Date();
    return(
        <Moment interval={1000} format={this.props.format}>
            {displayTime}
        </Moment>
    );
}

}
`

This component is called by the following line from another page:
<Clock fromat="yyyy MMM dd HH:mm:ss"/>

I'm using the latest version of react from npm.

Error: Expected a component class, got [object Object].

React-Native project. Trying to display story.date_created, such as 2017-02-24T08:00:00.000Z

import Moment from 'react-moment';
...
let dateToFormat = new Date(story.date_created);
return(
...
<View>
     <Moment date={dateToFormat} />
     <Text style={styles.author}>{story.given_name.toUpperCase() + ' ' + story.family_name.toUpperCase()}</Text>
</View>
...
)

React: 16.0.0-alpha.12
React-Native: 0.45.0
React-Moment: 0.2.4

Style React-Native element

I see that I am supposed to provide a class type like 'Text' to the element prop in React-Native. This works but I cannot figure out how to style that element because I am can just pass the class as a type and Moment does not have a 'style' prop for forwarding. How should I do this?

Couldn't find preset "es2015"

Hi, I had that error after install react-moment in a react-native project. What are I doing wrong? Thanks!

Diff format feature request

Feature Request

Would be nice if we could have a format option that is like units but can do a few units at all once. ie 3m40s vs 3.66 minutes.

Invariant Violation "view config not found for name time"

import Moment from 'react-moment';
....
<Text style={styles.date} >  <Moment> {data.last_login}</Moment> </Text>

data.last_login = "2017-11-20T17:57:14.000Z"
Code is working without Moment

Update component after some time when using fromNow

The component doesn't currently have a mechanism to update the time automatically when out of date, i.e.

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

export default () => (
  <Moment fromNow>{new Date()}</Moment>
)

outputs:

<time>a few seconds ago</time>

and the content will not update over time (in a minute it will still display "a few seconds ago").

Would you accept a pull request that adds support for this?

Would be nice to see react 16 support

Locale attribute not change language

Hi.
Im setting locale to 'pt-br' and result is.

The language not change.
This is my code....
<Moment locale="pt-br">{project.lastModified}</Moment>

I doing something wrong?

current time starts from 5 minutes

I have used moment in the react project, but as it was supposed to show the time from a second it started showing time from 5 minutes but it was supposed to show a second ago.
here is my code:
<Moment fromNow ago>{new Date(e.created_at)}</Moment> &nbsp; ago
can anyone suggest what I am doing wrong or is it this libraries problem?

Consider pooled updates

The current design creates a separate timer for each individual component. If the component is used many times on a single page, it can create quite a few timers. It might be better to pull the setInterval out of the component and maintain an update function list that an external interval timer iterates over.

Global Calendar config

Is there a way to update a global calendar config like in the MomentJS example here?

I saw the global config option in the read me but didn't see anything about the calendar.

locale props return error

Hi guys,

locale="fr" return this error :

TypeError: config._locale is null

<Moment format="D MMM YYYY" locale="fr">{article.dateCreated.toISOString().substring(0, 10)}</Moment>

Without locale="fr", i've no error :(

Unix time in millisecconds

Is there only support for secconds?
Need this:
https://momentjs.com/docs/#/parsing/unix-timestamp-milliseconds/

globalLocale doesn't change the language

Why Moment.globalLocale from react-moment doesn't change the locale and translate the language?

I fixed this just with moment but not with react-moment

import React, {Component} from 'react'
// import Moment from "react-moment"
// import moment from "moment"
import moment from 'moment/min/moment-with-locales'
import {Text, View} from "react-native"

export default class ParseDate extends Component {
    constructor(props) {
        super(props)

        // Set the locale for every moment instance to Portuguese.
        moment.locale('pt-br')
        this.localMoment = moment()
    }

    render() {
        return (
            <View>
                {/*<Moment element={Text} format={`LLL`}>{new Date().toString()}</Moment>*/}
                <Text>{this.localMoment.format('LLLL')}</Text>
            </View>
        )
    }
}

output: Quinta-feira, 9 de novembro de 2017 às 02:07

What's going on with react-moment locale?

References: #10 #17 #41
https://github.com/headzoo/react-moment#global-config
https://github.com/headzoo/react-moment#usage-with-react-native

Typescript Typings

Hello,

I wrote this typescript typings:

declare module 'react-moment' {
    import moment from 'moment';
    import {Component} from "react";

    type addOrSubtrack = {
        years?: number,
        y?: number
        quarters?: number,
        Q?: number,
        months?: number,
        M?: number,
        weeks?: number,
        w?: number,
        days?: number,
        d?: number,
        hours?: number,
        h?: number,
        minutes?: number,
        m?: number,
        seconds?: number,
        s?: number,
        milliseconds?: number,
        ms?: number
    }

    type dateTypes = string|number|Array<string|number|object>|object;
    type calendarTypes = boolean|object;

    type MomentProps = {
        element?: JSX.Element,
        date?: dateTypes,
        parse?: string|Array<string>,
        format?: string,
        add?: addOrSubtrack,
        subtract?: addOrSubtrack,
        ago?: boolean,
        fromNow?: boolean,
        fromNowDuring?: number,
        from?: dateTypes,
        toNow?: boolean,
        to?: dateTypes,
        calendar?: calendarTypes,
        unix?: boolean,
        utc?: boolean,
        tz?: string,
        locale?: string,
        interval?: number,
        diff?: dateTypes,
        unit?: string,
        decimal?: boolean,
        filter?: Function,
        onChange?: Function

    }

    export default class Moment extends Component<MomentProps, any> {
        constructor(props:MomentProps);
        public static globalMoment: moment.Moment;
        public static globalLocale: string;
        public static globalFormat: string;
        public static globalParse: string;
        public static globalTimezone: string;
        public static globalElement: string;
        public static globalFilter: Function;
        public static startPooledTimer(interval?: number): void;
        public static clearPooledTimer(): void;
        public static getDatetime(props: MomentProps): any;
    }
}

Have a great day!

I can't find a way to tell the component to usea a locale.

I don't know of its an issue per se but I don't see it documented so I wonder what I should do to tell the component to use a locale, I want to use the spanish locale for moment.js for example.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

React.PropTypes usage is now deprecated. prop-types now needs to be used as a replacement

Refer to dist/index.js