Question 411049 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Issue with React application

I’m having an issue with the generation of a new Date object in React using a provide date string in the format of YYYY-MM-DD without using my locale machine’s timezone, as this breaks the function that receives this date.

Here is an example of the code:

const timezone = 'America/New_York';

const changeDate = (date: string) => () => {
  const newDate = moment.tz(
    date,
    'YYYY-MM-DD',
    timezone
  ).startOf('day').toDate();

  setDate(newDate);
};

Is it possible to update this to ensure that the new Date created is always using the date provided? Sometimes it provides the day before if my local machine timezone is in a timezone with a large difference.

Thank you!

I tried a few options using moment-timezone library but have yet to find a good resolution.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the issue was due to improper ISOString date being passed caused the Moment library to fail parsing the data correctly. Another issue I found is that the date Moment was creating didn't work correctly on Safari because of the single Day and Month value doesn't work on Safari, has to be a two digit value: ex. 2024-01-01 and not 2024-1-1.


  2. 0

    The solution proposed and demoed below assumes that the number of timezones to handle is small enough to be either hard-coded or managed with a small list. This assumption is sought in favour of the simplicity and brevity of the solution.

    Request to seek alternatives in case this assumption does not suit your needs. However it may help you if you go through the answering part at least. It mentions about the following topics. Perhaps it may benefit you.

    Answering part:

    1. Date parser function
    2. Time zones
    3. Timezone offset
    4. ISO 8601 date time string format.

    It is very easy to use the Date constructor in the JavaScript standard library.

    Let us take a sample date string below: The below statement returns a date in UTC timezone. It gives UTC time since there is no timezone offset specified in the date string passed into it.

    const date = new Date('2024-10-04');
console.log(date); // 2024-10-04T00:00:00.000Z UTC time

    Now let us see another case with the same date string, but this time with a timezone offset. The timezone offset is a signed one with the format HH:mm. The list of all is available in this Wiki page List of tz database time zones.

    Let us take the timezone America/New_York. This timezone is trailing UTC by 5 hours. Therefore the below date time string shows the local time in the timezone America/New_York. When the local time in America/New_York is ‘2024-10-04T00:00’, the equivalent UTC time is 2024-10-04T05:00:00.000Z which is the value of the date created below.

    const date = new Date('2024-10-04T00:00-05:00');
console.log(date); // 2024-10-04T05:00:00.000Z UTC time equivalent to the local time in New York.

    In plain words, when the local time in New-york is 2024, Oct, 5 12 AM, start of the day, the equivalent time in UTC is the same except it has passed 5 hours of the day since New York timezone trails with UTC by 5 hours. So the solution proposed over here is just append the string “T00:00-05:30” to the date string. This will result in a new date based on the local time in America/New_York. This has been detailed here in the section ISO 8601 date time string format

    A Sample code

    const changeDate = (dateString, timezoneOffset = 'Z') => {
  return new Date(dateString + 'T00:00:00' + timezoneOffset);
};

const date1 = changeDate('2024-10-04');
const date2 = changeDate('2024-10-04', '-05:00'); // NewYork timezone offset
const date3 = changeDate('invalid date string');

console.log(date1); // 2024-10-04T00:00:00.000Z UTC time
console.log(date2); // 2024-10-04T05:00:00.000Z UTC time 
console.log(date3); // Invalid Date
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search