How to use intervalToDuration function from date-fns

Question

I tried using the intervalToDuration function from date-fns but I keep getting an error that says End Date is invalid.

My code is as follows

import { intervalToDuration} from "date-fns";

    remaining() {
          const now = new Date();
          const end = this.endDate;
          return intervalToDuration({
            start: now,
            end: end,
          });
        },

this.endDate is dynamically populated but for this question is equal to 2021-02-26T00:00:00.000Z

Answer 1

Since your endDate variable is coming from an API, it is being stored as a string, not a date.

Calling intervalToDuration is expecting an interval object to be passed as the parameter. An interval consists of two Dates or Numbers (unix timestamp)

To correct this, you must convert endDate to a date object, below is an untested example;

const remaining = () => {
  const endDate = "2021-02-26T00:00:00.000Z";
  const now = new Date();
  const end = new Date(endDate);
  return intervalToDuration({
    start: now,
    end: end
  });
};

const dur = remaining();
console.log("DURRATON ", JSON.stringify(dur));
//
// Response == DURRATON  {"years":0,"months":1,"days":8,"hours":15,"minutes":42,"seconds":0}
//

Notice: This does not handle timezones correctly. new Date() will create a datetime in the client timezone where it appears that your response from the API is in GMT timezone