nathanhoad / react-timestamp Goto Github PK

View Code? Open in Web Editor NEW

50.0 2.0 17.0 414 KB

A React component for displaying a UTC datetime in the local timezone

License: MIT License

JavaScript 6.24% HTML 1.44% TypeScript 92.32%

react datetime timestamp

react-timestamp's People

Contributors

Stargazers

Watchers

Forkers

tujoworker ericdcobb drewdiddy611 helpyteam jrin7 b3rry dinosaurjoe tux-tn jeloagnasin disbelief lennon-mawele bpartridge83 anurag-sh nelsonarguera12 chrismark shiftyfitty

react-timestamp's Issues

Need a funtion to get value

I need a function which can return date value.
Is there any way??

Countdown

Is it possible to make an option so the countdown can be more than six months out?

null is not an object (evaluating 'date.split')

Hi!

I'm connecting to an API, which gives me a millisecond timestamp, so I need to divide it by 1000 to get the correct timestamp in seconds. All ok, in fact, if I put the result of my equation anywhere, it shows the timestamp as a number. Problem is that I can't use this inside , it throws the next error:

null is not an object (evaluating 'date.split').

Heres my code:

renderRow(post) {
    var correctTime = Number(post.publish_date);
    correctTime = Math.floor(correctTime / 1000);
    return(
        <TouchableHighlight>
            <View style={styles.row}>
                <Image style={styles.image} source={{uri: post.featured_image}} />
                <View style={styles.info}>
                    <Text style={styles.title}>{post.title}</Text>
                    <Text style={styles.author}>Por {post.author_name} {correctTime}</Text> {/* <--- It shows correctly here. */}
                    <Timestamp time={Number(correctTime)} component={Text} format='date' style={styles.date} /> {/* <--- Here's the problem. */}
                    <Text numberOfLines={3} style={styles.description}>{post.meta_description}..</Text>
                </View>
            </View>
        </TouchableHighlight>
    );
}

Issue using until and since

Wanted to see what comes out when using:

"<Timestamp time="1526612026000" until="1546612026000"/>"
"<Timestamp time="1526612026000" since="1506612026000"/>"

this is the response:
TypeError: compare_to.getTime is not a function
Timestamp._distanceOfTimeInWords
...node_modules/react-timestamp/lib/timestamp.js:66

compare_to = new Date();
}

var seconds = Math.floor((compare_to.getTime() - date.getTime()) / 1000);
var is_ago = seconds >= 0;
 
seconds = Math.abs(seconds);..

Proposal: ability to see seconds in 'time' and 'ago' format

Hi,

I was wondering if it'd be possible to add the ability to see the seconds rather than "less than a minute ago" or "a minute ago" when choosing format='ago' and similar to see the seconds when choosing format='time' ?

I could try add that myself and do a PR but I've only just started playing with React/JS so I guess I could make that work but it'd probably be very ugly code tho.

Thanks!
Alex

Utilizing React Timestamp

Error

./node_modules/react-timestamp/dist/index.mjs
Can't import the named export 'useState' from non EcmaScript module (only default export is available)

Screen

"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-timestamp": "^5.0.0",
}

expected a component class, got [object Object]

Hello.

From example:

const Timestamp = require('react-timestamp');
...
<Timestamp time="1450663457" />

I get an error "expected a component class, got [object Object]"

The text should have the ability of updating as time goes by

It would be natural if the text changed because now, if the page is loaded the text just stays the same. If you do not want this behaviour to be standard you could add it as a boolean attribute.

I made a component sort of a container like this:


import React, { Component } from 'react';
import Timestamp from 'react-timestamp';

class TimestampUpdating extends Component {
    render() {
        return(<Timestamp time={this.props.time}/>);
    }
    componentDidMount() {
        let intervalId = setInterval(() => {
            this.forceUpdate();
        }, 60000);
        this.setState({ intervalId: intervalId });
    }
    componentWillUnmount() {
        clearInterval(this.state.intervalId);
    }
}
export default TimestampUpdating;

Uncaught TypeError: Cannot read property 'enqueueForceUpdate' of undefined

<Timestamp time={record.timestamp}
    format='ago'
    precision={this.props.parentState.width > 600 ? 2 : 1}
    autoUpdate
/>

Make translations configurable

Would be cool to change the translations easily.

Add seconds support

I need to print the seconds to and maybe a configuration for language and format (for example using 0:24 format instead of AM/PM).

Thanks

Please add a licence

I don't know if I can use your package in my project. Please add a licence file. Thanks.

Support for 24-hour clock

Hi,

Great module - I really appreciate it :)
Is it possible to add support for 24-hour clock? I.e., instead of 6:15pm it says 18:15.

Thanks in advance.

Change wording when using `ago` format

Hi,

I was noticing that using the default ago-format I see the wording differ in a way that makes no sense to me. E.g. when I pass a timestamp that is recent it will say a few seconds while when it was a few minutes ago it says a few minutes ago. Shouldn't it say a few seconds ago as well? This looks odd to me.

When looking at https://github.com/nathanhoad/react-timestamp/blob/master/src/timestamp.js#L53 it seems to be just a minimal change that would make the whole ago-format more cohesive. What do you think?

Best,
Fabian

Seconds details

Hello

How do you get the timestamp edited with the seconds details ?

Thanks a lot

error: npm install --save react-timestamp with react^18

Hello,

It seems there is an NPM error when you install react-timestamp with React v.18.0.0.

Indeed, this is the complete log:

0 verbose cli /usr/local/Cellar/node/18.3.0/bin/node /usr/local/bin/npm
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/Users/jeremiemarais/ETNA/leboncoin/frontend-technical-test/.npmrc Completed in 1ms
10 timing config:load:project Completed in 4ms
11 timing config:load:file:/Users/jeremiemarais/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 13ms
19 timing npm:load:configload Completed in 13ms
20 timing npm:load:mkdirpcache Completed in 1ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm i react-timestamp
23 verbose argv "i" "--save" "react-timestamp"
24 timing npm:load:setTitle Completed in 3ms
25 timing config:load:flatten Completed in 2ms
26 timing npm:load:display Completed in 4ms
27 verbose logfile logs-max:10 dir:/Users/jeremiemarais/.npm/_logs
28 verbose logfile /Users/jeremiemarais/.npm/_logs/2022-06-19T15_42_51_983Z-debug-0.log
29 timing npm:load:logFile Completed in 4ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 25ms
33 timing arborist:ctor Completed in 1ms
34 silly logfile start cleaning logs, removing 1 files
35 silly logfile done cleaning log files
36 timing idealTree:init Completed in 401ms
37 timing idealTree:userRequests Completed in 3ms
38 silly idealTree buildDeps
39 silly fetch manifest react-timestamp@*
40 timing arborist:ctor Completed in 0ms
41 http fetch GET 200 https://registry.npmjs.org/react-timestamp 1092ms (cache revalidated)
42 silly fetch manifest react@^18.1.0
43 http fetch GET 200 https://registry.npmjs.org/react 58ms (cache revalidated)
44 silly fetch manifest react@^16.9.0
45 timing idealTree Completed in 1582ms
46 timing command:i Completed in 1593ms
47 verbose stack Error: unable to resolve dependency tree
47 verbose stack     at [failPeerConflict] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1428:25)
47 verbose stack     at [loadPeerSet] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1394:34)
47 verbose stack     at async [buildDepStep] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:976:11)
47 verbose stack     at async Arborist.buildIdealTree (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:218:7)
47 verbose stack     at async Promise.all (index 1)
47 verbose stack     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:153:5)
47 verbose stack     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:156:5)
47 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli.js:78:5)
48 verbose cwd /Users/jeremiemarais/ETNA/leboncoin/frontend-technical-test
49 verbose Darwin 21.5.0
50 verbose node v18.3.0
51 verbose npm  v8.11.0
52 error code ERESOLVE
53 error ERESOLVE unable to resolve dependency tree
54 error
55 error While resolving: [email protected]
55 error Found: [email protected]
55 error node_modules/react
55 error   react@"^18.1.0" from the root project
55 error
55 error Could not resolve dependency:
55 error peer react@"^16.9.0" from [email protected]
55 error node_modules/react-timestamp
55 error   react-timestamp@"*" from the root project
55 error
55 error Fix the upstream dependency conflict, or retry
55 error this command with --force, or --legacy-peer-deps
55 error to accept an incorrect (and potentially broken) dependency resolution.
55 error
55 error See /Users/jeremiemarais/.npm/eresolve-report.txt for a full report.
56 verbose exit 1
57 timing npm Completed in 1671ms
58 verbose unfinished npm timer reify 1655653372056
59 verbose unfinished npm timer reify:loadTrees 1655653372064
60 verbose unfinished npm timer idealTree:buildDeps 1655653372470
61 verbose unfinished npm timer idealTree:#root 1655653372471
62 verbose code 1
63 error A complete log of this run can be found in:
63 error     /Users/jeremiemarais/.npm/_logs/2022-06-19T15_42_51_983Z-debug-0.log

Thanks,

doesn't work

shows NaN NaN undefined .... to me..
That's an example on your readme ...