Parsing Custom Dates in JS
Tags: react, reactnative, webdev, javascript
Published: 2021-09-05 21:14:49

---
title: Parsing Custom Dates in JS
published: true
description: Dealing with unsupported date formats in JavaScript.
tags: react,reactnative,webdev,javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yblmi8cmpy9hqmi0iar.jpg
---


Recently at work we moved our iOS React Native app from [JSC](https://trac.webkit.org/wiki/JavaScriptCore) to [Hermes](https://reactnative.dev/docs/hermes) which became available for iOS as of [RN0.64](https://reactnative.dev/blog/2021/03/12/version-0.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:

```
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:

```
+03:00
```

but not in a format without a colon `±HHmm`:

```
+0300
```

Reading about [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601), it seems that both formats would be correct. I've submitted an issue about this on [facebook/hermes](https://github.com/facebook/hermes/issues/588) 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](https://github.com/facebook/hermes/issues/588#issuecomment-913167322): 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](https://day.js.org/en/) – 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](https://github.com/iamkun/dayjs/blob/dev/src/index.js#L55-L75). 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](https://day.js.org/docs/en/plugin/plugin). And the one we need is **[CustomParseFormat](https://day.js.org/docs/en/plugin/custom-parse-format):**

```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.:

| Format | Output  | Description                    |
| ------ | ------- | ------------------------------ |
| `YY`   | 18      | Two-digit year                 |
| `YYYY` | 2018    | Four-digit year                |
| `M`    | 1-12    | The month, beginning at 1      |
| `MM`   | 01-12   | The month, 2-digits            |
| `D`    | 1-31    | The day of the month           |
| `DD`   | 01-31   | The day of the month, 2-digits |
| `H`    | 0-23    | The hour                       |
| `HH`   | 00-23   | The hour, 2-digits             |
| `m`    | 0-59    | The minute                     |
| `mm`   | 00-59   | The minute, 2-digits           |
| `ss`   | 00-59   | The second, 2-digits           |
| `SSS`  | 000-999 | The millisecond, 3-digits      |
| `Z`    | +05:00  | The offset from UTC, ±HH:mm    |
| `ZZ`   | +0500   | The offset from UTC, ±HHmm     |


> You can find the [full reference here](https://day.js.org/docs/en/display/format#list-of-all-available-formats).

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.

> Check out the source code for [CustomParseFormat](https://github.com/iamkun/dayjs/blob/dev/src/plugin/customParseFormat/index.js).


------------------

This article was cross-posted from my personal blog. Do [subscribe](https://osamaqarem.com/?join=true) to me there!