React Intl v2 cannot use <FormattedDate> with date from SQL
I am creating a demo with React and stumbled upon a reaction. I tried using the FormattedDate component with a "value" that is returned from an API call and stored in "this.state"
However, the page does not load, and the console shows: RangeError: the provided date does not match the 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 rendering component I have,
render() {
return (
<FormattedDate value={new Date(this.state.booking.checkIn)} day="numeric" month="long" year="numeric" />
)
}
In code, we see that the component uses Intl.DateTimeFormat. prototype.format to create a formatted date, but when I do the same in 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
, ? "", (new Date(date.parse(this.state.booking.checkIn)
, .
+4