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?
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