4

I've been building an demo with React and came across react-intl. I tried to use the FormattedDate component with a 'value' that is returned from an API call and is stored in 'this.state'

However the page fails to load and the console shows: RangeError: Provided date is not in valid range, the code is below.

index.js

ReactDOM.render(
    <IntlProvider locale='en'>
      <Router>
        <Route path="/" component={App}>
          <IndexRoute component={Login} />
          <Route path="bookings" component={Bookings} />
          <Route path="bookings/:id" component={BookingDetail} />
          <Route path="create" component={BookingCreate} />
        </Route>
      </Router>
    </IntlProvider>,
    document.getElementById('react-container')
);

and in my component's render I Have, 

render() {
    return (
      <FormattedDate value={new Date(this.state.booking.checkIn)}  day="numeric" month="long" year="numeric" />
    )
}

In the code we see that the component uses Intl.DateTimeFormat.prototype.format to produce the formatted date, but when I do the same in the Node repl

var date = '2015-10-30T23:53:28.879Z'
console.log(new Intl.DateTimeFormat().format(new Date(date)));

10/30/2015 //It produces the correct output

Any idea why this is happening? I've tried also tried assigning the bare string as the 'value', as well as (new Date(date.parse(this.state.booking.checkIn), but the all produce the range error.

Thacker
  • 41
  • 1
  • 6

1 Answers1

2

I've had a similar issue. Looking at my logs, I noticed that some libraries (momentjs in my case) return a full date with minutes divided into 100 seconds.

To take the code snippet you provided, instead of:

 '2015-10-30T23:53:28.879Z'

it returns something like:

 '2015-10-30T23:53:86.879Z'

formatjs does not accept minutes divided into more than 60 seconds (as expected).

For my needs, I do not care about the seconds, so I solved the issue by just drop the seconds from the string before passing it to formatjs.

Freddo
  • 523
  • 6
  • 16