Correct Date format in formatWithOptions results in Range Error: Invalid time value

Question

I want to display the date for each entry (date, text, question, answer) in a json database within a lit element in a js module. The date format for (date) inside the json db is valid (see this post). Example: "2021-12-24T21:06:06.773Z"

Relevant code:

import { formatWithOptions } from "date-fns/fp";
import compose from "crocks/helpers/compose";

...

const newDate = (x) => new Date(x);


const formatDateWithOptions = formatWithOptions(
  {
    awareOfUnicodeTokens: true,
  },
  "d MMMM, yyyy, h:mm a"
);

const prettyDate = compose(formatDateWithOptions, newDate); // this is registering as an invalid date

When ${prettyDate(date)} is called inside a lit element, it throws

RangeError: Invalid time value.

According to the date-fns docs, formatWithOptions() should be fine to call with "d MMMM, yyyy, h:mm a". This post deals with the same error, but is using a different function (formatDistanceToNow). Where am I going wrong with my variables?

Answer 1

The code below will generate an invalid date if x is undefined.

const newDate = (x) => new Date(x);

also, don't forget that you need to execute the compose function to provide an input to the newDate function.

The code below should work:

const MY_DATE_STR = "2021-12-24T21:06:06.773Z";

const newDate = x => {
  if (x === undefined) { return new Date(); }
  return new Date(x);
}

const formatDateWithOptions = formatWithOptions(
  {
    awareOfUnicodeTokens: true,
  },
  "d MMMM, yyyy, h:mm a"
  );

const prettyDate = compose(formatDateWithOptions, newDate)(MY_DATE_STR);

console.log(prettyDate); // 24 December, 2021, 1:06 PM