Every once in a while you run into some issues caused by laziness or overdoing. :) Chrome tries to be smart for you, but should you let it?
2021-04-29I've been developing a simple calendar using React Big Calendar. After creating some features, I've almost finished polishing every small detail, when i realised it's not displaying the events on mobile.
So I checked the code, but it seemed fine. At first I tought it has to do some basic react bug in safari (on iOS every browser uses safari mobile as a renderer), but state was updating fine; logging info seemed good as well:
Maybe it has to do something with the state update, and the fetch what I'm doing from the server I guessed. Here's the response from the API, yes the date was malformed, but I overlooked it because it wasn't causing any issues in Chrome:
I usually work in a linux environment using basic front-end setup and debugging in Chrome. So to check everything out I booted up a windows machine, and reviewed the component, nevertheless it was working fine. Then tried different browsers as well. Still fine. So I pulled out a mac and finally found something interesting. The dates were not converted properly.
In Chrome the new Date()
is working fine with the unusal string
But in Safari it won't, And why it should be? it's a malformed date string. :)
List of formats accepted by new Date()
new Date('December 17, 1995 03:24:00')
new Date('1995-12-17T03:24:00')
new Date(1995, 11, 17)
new Date(1995, 11, 17, 3, 24, 0)
new Date(628021800000)
So lesson learned, don't trust your browser and always use the formats listed at MDN, or just swith to TypeScript to avoid these silly issues.