I am creating a react app and I am trying to display the date in relative time with javascript for example "2 years ago" I created a function to convert the string to a date and figure out the difference between the dates to display the time difference but I am getting NaN displayed.
this is my function and my render from my ponent
timeDifference = () => {
const { products } = this.state;
var previousdate = new Date(products.date);
var previousmnth = ("0" + (previousdate.getMonth()+1)).slice(-2);
var previousday = ("0" + previousdate.getDate()).slice(-2);
var previoushours = ("0" + previousdate.getHours()).slice(-2);
var previousminutes = ("0" + previousdate.getMinutes()).slice(-2);
var previous = [ previousdate.getFullYear(), previousmnth, previousday, previoushours, previousminutes ].join("-");
var current = new Date();
var minutes = 60 * 1000;
var hours = minutes * 60;
var days = hours * 24;
var months = days * 30;
var years = days * 365;
var elapsed = current - previous;
if (elapsed < minutes) {
return Math.round(elapsed/1000) + ' seconds ago';
}
else if (elapsed < hours) {
return Math.round(elapsed/minutes) + ' minutes ago';
}
else if (elapsed < days ) {
return Math.round(elapsed/hours ) + ' hours ago';
}
else if (elapsed < months) {
return 'approximately ' + Math.round(elapsed/days) + ' days ago';
}
else if (elapsed < years) {
return 'approximately ' + Math.round(elapsed/months) + ' months ago';
}
else {
return 'approximately ' + Math.round(elapsed/years ) + ' years ago';
}
}
render() {
const Prods = () => {
return (
<div>
<div className="row">
<button onClick={this.sortPrice}>sort by price lower to higher</button>
<button onClick={this.sortSize}>sort by size small to big</button>
<button onClick={this.sortId}>sort by Id</button>
</div>
{products.map(product =>
<div className="row">
<div className="col-3">
<p> Price: ${(product.price/100).toFixed(2)}</p>
</div>
<div className="col-3">
<p style={{fontSize: `${product.size}px`}} > {product.face}</p>
</div>
<div className="col-3">
<p>Published: {this.timeDifference()}</p>
</div>
</div>
)}
<p>"~END OF CATALOG~"</p>
</div>
);
};
const { products, isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <Loading />;
}
return (
<Prods />
);
}
In my database my date is save in this format "Sun Nov 10 2019 03:58:48 GMT-0500 (Colombia Standard Time)"
I am creating a react app and I am trying to display the date in relative time with javascript for example "2 years ago" I created a function to convert the string to a date and figure out the difference between the dates to display the time difference but I am getting NaN displayed.
this is my function and my render from my ponent
timeDifference = () => {
const { products } = this.state;
var previousdate = new Date(products.date);
var previousmnth = ("0" + (previousdate.getMonth()+1)).slice(-2);
var previousday = ("0" + previousdate.getDate()).slice(-2);
var previoushours = ("0" + previousdate.getHours()).slice(-2);
var previousminutes = ("0" + previousdate.getMinutes()).slice(-2);
var previous = [ previousdate.getFullYear(), previousmnth, previousday, previoushours, previousminutes ].join("-");
var current = new Date();
var minutes = 60 * 1000;
var hours = minutes * 60;
var days = hours * 24;
var months = days * 30;
var years = days * 365;
var elapsed = current - previous;
if (elapsed < minutes) {
return Math.round(elapsed/1000) + ' seconds ago';
}
else if (elapsed < hours) {
return Math.round(elapsed/minutes) + ' minutes ago';
}
else if (elapsed < days ) {
return Math.round(elapsed/hours ) + ' hours ago';
}
else if (elapsed < months) {
return 'approximately ' + Math.round(elapsed/days) + ' days ago';
}
else if (elapsed < years) {
return 'approximately ' + Math.round(elapsed/months) + ' months ago';
}
else {
return 'approximately ' + Math.round(elapsed/years ) + ' years ago';
}
}
render() {
const Prods = () => {
return (
<div>
<div className="row">
<button onClick={this.sortPrice}>sort by price lower to higher</button>
<button onClick={this.sortSize}>sort by size small to big</button>
<button onClick={this.sortId}>sort by Id</button>
</div>
{products.map(product =>
<div className="row">
<div className="col-3">
<p> Price: ${(product.price/100).toFixed(2)}</p>
</div>
<div className="col-3">
<p style={{fontSize: `${product.size}px`}} > {product.face}</p>
</div>
<div className="col-3">
<p>Published: {this.timeDifference()}</p>
</div>
</div>
)}
<p>"~END OF CATALOG~"</p>
</div>
);
};
const { products, isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <Loading />;
}
return (
<Prods />
);
}
In my database my date is save in this format "Sun Nov 10 2019 03:58:48 GMT-0500 (Colombia Standard Time)"
Share Improve this question asked Nov 18, 2019 at 15:55 NatashaNatasha 1032 silver badges10 bronze badges3 Answers
Reset to default 8If you can't use a library, I'd remend as in my ment to convert everything to a numeric Unix timestamp to make the math much simpler. Here's a version assuming the ining date has already been converted with getTime() or valueOf():
const timeAgo = (prevDate) => {
const diff = Number(new Date()) - prevDate;
const minute = 60 * 1000;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
const year = day * 365;
switch (true) {
case diff < minute:
const seconds = Math.round(diff / 1000);
return `${seconds} ${seconds > 1 ? 'seconds' : 'second'} ago`
case diff < hour:
return Math.round(diff / minute) + ' minutes ago';
case diff < day:
return Math.round(diff / hour) + ' hours ago';
case diff < month:
return Math.round(diff / day) + ' days ago';
case diff < year:
return Math.round(diff / month) + ' months ago';
case diff > year:
return Math.round(diff / year) + ' years ago';
default:
return "";
}
};
...
console.log(timeAgo(new Date("Thu Oct 25 2018").getTime()));
I didn't do the singular/plural handling for all the units but you get the idea. It's just pure arithmetic if you convert your dates before you bring them into the function, which can be done easily with built-in JS functionality. You can even convert them inside the function if you know the format they're ing in as.
You have current of Date type and previous of string. Date - string = NaN. You just need to do:
var elapsed = current - productsdate;
I created a simple React Component to do this using moment.js for my project - sharing here in case anyone else es across this. https://gist.github./RaddishIoW/08c74444f5872495fe53a16e779a1fe5