reactjs - React displaying relative time with javascript - Stack Overflow

admin管理员组

文章数量:1345415

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)"

• javascript
• reactjs

Share Improve this question Follow asked Nov 18, 2019 at 15:55 NatashaNatasha 10322 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

If 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

本文标签： reactjsReact displaying relative time with javascriptStack Overflow