0

I am facing some issues with displaying dates. when users select a date i am formatting it like this

new Date(date).toISOString().split('T')[0];

because this is the format our django backend expects and then the backend returns a date like this:

2021-09-02

then I am formatting the date returned from the backend with moment.js:

moment.utc(new Date(date)).format('MMM DD')

But the problem is that when I select "September 25" I get "Sep 25".

But some of my team members who are in India select "September 25" they get "Sep 24".

If I run new Date('2021-09-02') in my dev tools.

I get Wed Sep 01 2021 17:00:00 GMT-0700 (Pacific Daylight Time)

and they get Date Thu Sep 02 2021 05:30:00 GMT+0530 (India Standard Time)

How can I handle this edge case? I'm not sure if I need to update the format stored on the backend. need your suggestions

Xaarth
  • 1,021
  • 3
  • 12
  • 34
  • This will help. its about time zones. https://stackoverflow.com/questions/15141762/how-to-initialize-a-javascript-date-to-a-particular-time-zone – Grumpy Sep 23 '21 at 07:35
  • 1
    What is the value of *date* in `new Date(date)`? See [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) *toISOString* returns a UTC timestamp, not local. These are not "edge cases", they are entirely predictable and should be dealt with or accommodated. – RobG Sep 23 '21 at 11:13

1 Answers1

1

This is a time zone issue, and the problem seems to be that you would like to select a date (25th September), but you are actually selecting a time and then converting it to a string to represent a date.

When your user selects a date, could you just have them select the day and the month, instead of a whole time?

Edit

Hmm, sorry, the issue isn't in the selecting of the date, but in turning the date returned from your server back into a time. But you don't want a time, you just want a date.

Your server is returning a string like "2021-09-25" to signify "Sep 25". You could parse this string and get the important parts:

function displayDayMonth(date) {
  const [_year, month, day] = date.split("-").map(s => parseInt(s, 10));
  const months = ["Jan", "Feb", //... etc ];
  return `${months[month - 1]} ${day}`;
}

const date = "2021-09-25";
displayDayMonth(date);
// => "Sep 25"

On the other hand, what happens if the time actually matters? If an event in Pacific Time is on the 25th September, then a good portion of that event occurs on the 24th September in India. Perhaps you are not capturing enough detail about the event?

philnash
  • 70,667
  • 10
  • 60
  • 88
  • Users are selecting the day and the month not a whole time. I'm using the material ui datepicker https://material-ui-pickers.dev/demo/datepicker and then formating the value returned from it like so `new Date(date).toISOString().split('T')[0]` – Xaarth Sep 23 '21 at 07:41
  • 1
    I have added some more to my answer. Let me know if that helps. – philnash Sep 23 '21 at 07:54