skip to Main Content

I’m making a React app with a survey component. If user clicks on skip survey button then after n-days (or hours) the survey should appear again. The rejected time is in UTC format comes from backend when app is loading.

I’d like to make a function which compares a rejected date in UTC and a locale date (users can be from anywhere around the world) and if it returns true then render the survey component.

The problem is with converting UTC date to unix (millisecond?) to compare it with locale date. How can I do it?

const shouldShowSurvey = (rejectedDateUTC, repeatIntervalMs) => {
  // rejectedDateMs is a UTC unix time
  const rejectedDateMs = new Date(rejectedDateUTC).getTime();
  const now = new Date().getTime();

  return rejectedDateMs + repeatIntervalMs < now;
};

shouldShowSurvey("2023-05-03T13:02:08.107402", 5000);

3

Answers


  1. You should add Z as a suffix of the ISOString of UTC Date for belonging the right UTC format.

    const shouldShowSurvey = (rejectedDateUTC, repeatIntervalMs) => {
      // rejectedDateMs is a UTC unix time
      const rejectedDateMs = new Date(rejectedDateUTC+'Z').getTime();
      const now = new Date().getTime();
      return rejectedDateMs + repeatIntervalMs < now;
    };
    
    console.log(shouldShowSurvey("2023-05-03T13:02:08.107402", 5000));

    Credit to phuzi.

    Login or Signup to reply.
  2. To compare the rejected date in UTC with the current local date, you can convert the UTC date to a Unix timestamp in milliseconds using the Date.parse() method. Here’s an updated version of the shouldShowSurvey function that converts the rejected date to Unix timestamp and compares it with the current local date in milliseconds:

      const shouldShowSurvey = (rejectedDateUTC, repeatIntervalMs) => {
      const rejectedDateMs = Date.parse(rejectedDateUTC);
      const now = new Date().getTime();
    
      return rejectedDateMs + repeatIntervalMs < now;
    };
    

    In this example, the Date.parse() method is used to convert the rejected date in UTC format to a Unix timestamp in milliseconds. The getTime() method is then used to get the current local date in milliseconds. Finally, the function compares the rejected date in milliseconds with the current local date plus the repeat interval in milliseconds, and returns true if the survey should be shown again.

    Login or Signup to reply.
  3. You possibly misunderstand how Javascript Date objects work.

    The Date object is essentially a wrapper with some affordances around a millisecond UTC integer timestamp, which is what Date.prototype.getTime returns to you. Always.

    There’s no such thing as a "local date" vs. a "utc date", they are all UTC dates but some of those convenience methods (e.g. toString, toLocaleString) will return a string representation of that UTC date converted to user’s local timezone, because local/string representations are what users care about, not programmers.

    The only difference (and the problem you’re having) is going the other way: i.e. from string representation to Date object. If you, the programmer, do not supply a timezone with a string it will have to guess, and depending on the format of the string it will sometimes be interpreted as a string of a local time (e.g. new Date('2023-05-02T00:00:00');) and sometimes be interpreted as a string of a UTC (e.g. new Date('2023-05-02');).

    You can either memorize all the obscure and possibly implementation-defined rules around datestring parsing… or you can provide an explicit timezone when parsing from a string and then the resulting Date object will be unambiguously correct. Once you’ve parsed it correctly all the standard mathematical comparisons (like > and <) will work on the Date objects.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search