The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Graar (1) [Avatar] Offline
#1
Hi,

I am working through your book and got to the clock-analog-digital example and I found that the analog clock does not work. All three hands point to the three (default position).

On digging a little further I believe that the cause is that the:

let date = new Date(props.time)


command is failing to create a valid date object. Since I am in the UK, the string that is being passed as props.time is 15/08/2017, which is not a valid dataString according to https://www.w3schools.com/js/tryit.asp?filename=tryjs_date_new_string. If I were in the US, this would be 08/15/2017 and this works fine, but not in the UK, when the day number is greater than 12.

I have been able to make it work by removing the date string from the bracket, but this invalidates the point of the example.

How could I correct this in Javascript ? How do I set my locale so that it works as expected ?

Thanks.
509947 (1) [Avatar] Offline
#2
Hi Graar,

The same issue (i.e., All three hands point to the three) happened to me.
Here are my tweaks to /ch04/clock-analog-digital/jsx/clock.jsx, and then it works for me after rebuilding clock.js.

line 6
currentTime: (new Date()).toLocaleString()
->
currentTime: new Date()

line 12
this.setState({currentTime: (new Date()).toLocaleString()})
->
this.setState({currentTime: new Date()})

line 19
<DigitalDisplay time={this.state.currentTime}/>
->
<DigitalDisplay time={this.state.currentTime.toLocaleString()}/>


Hope it helps you.