As an element of a material element selection element, the UI is launched from a Flat or Raised button element

Question

I try to open the date selection dialog with the Raised button, which is inside the toolbar item, without joy.

After going through the documentation, I did not find a solution. I tried putting the date picker inside the flat button like this:

<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 a date selection dialog when I click a button.

Any help would be greatly appreciated.

Answer 1

you need to open it from the links of the DatePicker component

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

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

Answer 2

In your onTouchTap event, you can simply render the component directly from ReactDOM to a container element (usually a div):

//on TouchTap
handleRaisedButtonTap() {
     ReactDOM.render (<DatePicker ... />, 
             document.getElementById('div datepicker')); 
}

React, API React :)