How to show date correctly in react?

Question

I am building a web portal with solidity contract integration. In the contract, I have saved the date in uint from like this 1539491531.

When I show it on the web page it looks like this:

It showing different dates. But when I do like this in the code.

<Feed.Date>{Date(date)}</Feed.Date>

All dates are shown as the time right now like this: Mon Oct 15 2018 08:44:18 GMT+0530 (India Standard Time)

How can I solve this problem?. Can someone help me to solve this problem?. Thank you.

Don't post images, post text. Not everyone can see images. – RobG Oct 15 '18 at 04:35 — RobG, Oct 15 '18 at 04:35

score 3 · Accepted Answer · answered Oct 15 '18 at 03:34

3

You missed the new before Date(date) Also, maybe try multiplying that value by 100

<Feed.Date>{new Date(date*100)}</Feed.Date>

answered Oct 15 '18 at 03:34

edvilme

570
7
16

The *100 is to make up for the seconds in case the timestamp is not complete. See https://stackoverflow.com/questions/847185/convert-a-unix-timestamp-to-time-in-javascript – edvilme Oct 15 '18 at 03:35
2

it looks like those timestamps, so you'll need to multiply by *1000* to make it milliseconds - UTC timestamps are traditionally in seconds. – David Oct 15 '18 at 03:38

David · Answer 2 · 2018-10-15T03:40:39.500

Your problem is you're missing the new keyword.

Date() // Mon Oct 15 2018 13:30:55 GMT+1000 (Australian Eastern Standard Time)
Date(1) // Mon Oct 15 2018 13:30:55 GMT+1000 (Australian Eastern Standard Time)
Date('something random') // Mon Oct 15 2018 13:30:55 GMT+1000 (Australian Eastern Standard Time)

However, with new:

new Date() // Mon Oct 15 2018 13:30:55 GMT+1000 (Australian Eastern Standard Time)
new Date(1) // Thu Jan 01 1970 10:00:00 GMT+1000 (Australian Eastern Standard Time)
new Date('something random') // Invalid Date

See the note on MDN:

calling it as a regular function (i.e. without the new operator) will return a string rather than a Date object

When you call Date() without new, it calls a function that returns a string of the current time. It takes no arguments, but in Javascript, you can pass whatever you like to it and it will still work, so it just ignores any arguments that you pass, and returns a string, and not a Date of the current time.

typeof Date() // string
typeof new Date() // object

As noted by edvilme, your timestamps also look to be in seconds, not milliseconds as required by new Date() - you can just multiply by 1000 to make it work

new Date(1529491531) // Mon Jan 19 1970 02:51:31 GMT+1000 (Australian Eastern Standard Time)
new Date(1529491531 * 1000) // Wed Jun 20 2018 20:45:31 GMT+1000 (Australian Eastern Standard Time)

Dacre Denny · Answer 3 · 2018-10-15T03:38:08.473

1

Try adjusting your code like so:

<Feed.Date>{ new Date(date) }</Feed.Date>

By creating a date object (via new), you can simplify conversion from UTC epoch time (ie the value of date) into a human readable date string.

For more information on Date, see this MDN article

edited Oct 15 '18 at 03:38

answered Oct 15 '18 at 03:32

Dacre Denny

29,664
5
45
65

score 1 · Answer 4 · answered Oct 15 '18 at 03:36

I think that you can use the format function to help you with this.

Date.prototype.format = function(format)
{
 var o = {
 "M+" : this.getMonth()+1, //month
 "d+" : this.getDate(),    //day
 "h+" : this.getHours(),   //hour
 "m+" : this.getMinutes(), //minute
 "s+" : this.getSeconds(), //second
 "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
 "S" : this.getMilliseconds() //millisecond
 }
 if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
 (this.getFullYear()+"").substr(4 - RegExp.$1.length));
 for(var k in o)if(new RegExp("("+ k +")").test(format))
 format = format.replace(RegExp.$1,
 RegExp.$1.length==1 ? o[k] :
 ("00"+ o[k]).substr((""+ o[k]).length));
 return format;
}

Then you can use it like this:

var d1 = new Date();
d1.format('yyyy-MM-dd');

How to show date correctly in react?

4 Answers4