Parsing custom dates in JavaScript

Osama Qarem's photo
Osama Qarem
4 min read
Post big cover image

Recently at work we moved our iOS React Native app from JSC to Hermes which became available for iOS as of RN0.64. Previously we were using Hermes only on Android and it was working great. Now that Android and iOS run the same engine we have confidence that our JavaScript output for both platforms will be equal – they should work and fail in JS land in the same ways.

One thing which immediately broke on iOS was our Apple Health integration (which of course is iOS only) – specifically when parsing dates for user activities on the JS side. The date string returned from Objective-C to JavaScript looks like this:

TEXT
2021-08-31T17:00:00.000+0300

We could parse this previously on JSC using new Date() but for some reason it results in an "Invalid Date" on Hermes. Turns out the problem was in the time zone offset. Hermes could only parse ISO dates containing a time zone offset in ±HH:mm format:

TEXT
+03:00

but not in a format without a colon ±HHmm:

TEXT
+0300

Reading about ISO 8601, it seems that both formats would be correct. I've submitted an issue about this on facebook/hermes to get more information and apparently JavaScript implements a simplified version of ISO 8601 which doesn't specify the time zone offset without a colon:

@neildhar: Hi @osamaqarem, thanks for reporting this. Note that the JavaScript uses a simplified version of ISO 8601, and does not specify the format without the colon for the timezone. However, as you mentioned, most other engines seem to support it, so we probably should too.

So until this gets fixed in Hermes we will need to implement a workaround. We used the custom date formatter from Day.js – a great library which we were already making use of in our codebase.

Parsing Custom Dates

Day.js depends on new Date() for parsing under the hood. Meaning it would still fail to parse our date when running Hermes. A small bundle size is one of the main features of Day.js so the package ships with only core functionality. To extend its capabilities, we use plugins. And the one we need is CustomParseFormat:

JS
import dayjs from "dayjs"
import customParseFormat from "dayjs/plugin/customParseFormat"
dayjs.extend(customParseFormat)

That's it! Quite straightforward.

Now we just need to define our format. To give Dayjs the ability to parse our date, we need to tell it what our date looks like based on these defined formats, e.g.:

FormatOutputDescription
YY18Two-digit year
YYYY2018Four-digit year
M1-12The month, beginning at 1
MM01-12The month, 2-digits
D1-31The day of the month
DD01-31The day of the month, 2-digits
H0-23The hour
HH00-23The hour, 2-digits
m0-59The minute
mm00-59The minute, 2-digits
ss00-59The second, 2-digits
SSS000-999The millisecond, 3-digits
Z+05:00The offset from UTC, ±HH:mm
ZZ+0500The offset from UTC, ±HHmm

Our date looks like 2021-08-31T17:00:00.000+0300, so the format we need would be:

TEXT
'T' here is a constant which would be present in the expected date string
YYYY-MM-DDTHH:mm:ss.SSSZZ

Using our custom format:

JS
dayjs("2021-08-31T17:00:00.000+0300", "YYYY-MM-DDTHH:mm:ss.SSSZZ").toISOString()
// 2021-08-31T14:00:00.000Z

That works! And once the fix for Hermes is in, we can replace it with a regular JS date constructor call.

Enjoying this content?


Feel free to join the newsletter and I'll let you know about new posts 💙