Why do I get "RangeError: date value is not finite in DateTimeFormat format()" when using Intl.DateTimeFormat in React?

Question

I cannot see where the date format is being passed incorrectly to cause the RangeError?

I don't seem to be able to parse user.created. The user details are being brought in from a json response in reality, but I've shown them as a variable in this example.

Here's my MRE:

import * as React from "react";

function Details() {
  const user = {
    firstName: "Anthony",
    created: "2020-08-19T23:13:44.514Z",
    updated: "2020-09-12T00:31:31.275Z"
  };

  const userJoined = new Intl.DateTimeFormat("en-GB", {
    year: "numeric",
    month: "long",
    day: "2-digit"
  }).format(user.created.toString());

  return (
    <div>
      <p>{user.firstName}</p>
      <p>
        Joined:
        {new Intl.DateTimeFormat("en-GB", {
          year: "numeric",
          month: "long",
          day: "2-digit"
        }).format(userJoined)}
      </p>
    </div>
  );
}

export { Details };

this still seems to be a problem until today. Even with the new Date() constructor, Firefox does not seem to like it. Especially if you do some sort of array operation within new Date(), eg .split('-')[1]. For me unfortunately, the only solution that works for Firefox has been using moment. A painful addition of 72kb gzipped. — rawblue
– rawblue, Commented Jan 14, 2022 at 10:49

Eric · Accepted Answer · 2020-09-18 15:59:38Z

14

You may need to parse the string to date.

  const user = {
    firstName: "Anthony",
    created: new Date("2020-08-19T23:13:44.514Z"),
    updated: new Date("2020-09-12T00:31:31.275Z")
  };

answered Sep 18, 2020 at 15:59

Eric

1,3771 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anthony Over a year ago

Thanks for taking a look. I still get the range error. I've updated the sandbox to show my edits.

kronus Over a year ago

@Anthony - I was able to have mine work by using new Date within the DateTimeFormat - {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: '2-digit', }).format(new Date(item.createdAt))}

alfreema Over a year ago

@kronus nailed it ... wrapping the date passed to format( ... ) resolved it nicely (you may pass either a string or Date as a side-bonus).

Berend de Boer · Accepted Answer · 2021-02-24 04:54:22Z

4

You get this when you pass an invalid date to format(). Make sure it is a Date().

answered Feb 24, 2021 at 4:54

Berend de Boer

2,15222 silver badges17 bronze badges

Comments

Justin Meskan · Accepted Answer · 2022-09-09 23:09:54Z

2

 import moment from "moment-timezone";   
 moment.utc(date).tz(browserTimezone).format();

I know most of these issues have been resolved in modern versions of browsers, but I just ran into a case where this error was caused by having milliseconds attached to the end of my dates like this --

'2022/10/25 11:22:42.570684', // .570684

This works well in Chrome but not in any other browser i.e. Safari. After removing the milliseconds

'2022/10/25 11:22:42', // Works as expected, no milli seconds.

a link to the docs https://dygraphs.com/date-formats.html

edited Sep 9, 2022 at 23:09

answered Sep 8, 2022 at 1:05

Justin Meskan

7031 gold badge10 silver badges37 bronze badges

Collectives™ on Stack Overflow

Why do I get "RangeError: date value is not finite in DateTimeFormat format()" when using Intl.DateTimeFormat in React?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related