Populate <TimePicker> with time fetched from API

[gauravagarwal2704]

I have a scenario where I want to save the time and update the time using <TimePicker>, I am saving in a format HH:mm:00. But I am not able to pre-populate my <TimePicker> component with the string. For e.g. "13:56:00" inside a component. I tried various moment.js methods to do it but couldn't do it. Can anyone help ?

[HemalR]

Might be able to as I am doing similar in certain cases. Do you have example code to share that has/has not worked? Would help to provide help.

[kmatherne]

I'm not sure what format your times come in, but this works for me just fine. From my server my time comes in RFC3339 format. Once I receive the times I create javascript Date objects. Next I create moments with those Date objects, and lastly I set those moments as the defaultValue prop of my TimePicker.

// I receive these props from componentDidUpdate

var sdate = new Date(this.props.deal.Start)
var edate = new Date(this.props.deal.End)
this.setState({defaultStartDate: moment(sdate), defaultEndDate: moment(edate)})


// In my render method

<TimePicker
 defaultValue={this.state.defaultStartDate}
showSecond={false}
minuteStep={30}
className="xxx"
onChange={(value) => {this.setState({start: JSON.stringify(value)})}}
format={format}
use12Hours
inputReadOnly/>

<TimePicker
defaultValue={this.state.dend}
showSecond={false}
minuteStep={30}
className="xxx"
onChange={(value) => {this.setState({end: JSON.stringify(value)})}}
format={format}
use12Hours
inputReadOnly/>