How can a Material UI Date picker element be triggered from a Flat or Raised button element

Question

I am trying to open the date picker dialog from a Raised button, which is inside a toolbar element, with no joy.

After going through the documentation I found no solution. I tried putting the Date picker inside the Flat Button like so:

<RaisedButton label="Start Date" onTouchTap={this.handleRaisedButtonTap} primary={true}>
   <DatePicker autoOk={true} formatDate={this.datePickerFormat} hintText='Start Date' label='Start Date' value={this.state.filter.startDate.display} />
</RaisedButton>

I would like to open the date picker dialog when the button is clicked.

Any help would be greatly appreciated

Answer 1

you have to open it from the refs of the DatePicker component

openDatePicker(){
  this.refs.dp.openDialog()
}

render(){
  return (
    <div>
      <RaisedButton onTouchTap={this.openDatePicker} label='open date picker' />
      <DatePicker ref='dp' />
    </div>
  )
}