Opening Date/Time Picker programatically in Material UI LIbary

Question

I'm doing a project which uses React and Material Design. I'd like to go with Material UI, as I need fancy Dat- and Time Pickers, which this Library supplies as components.

As I have to set Start- and End-Times and -Dates in a particular step in the app, I'd like to "hop" from one Picker to the next to decrease the Clicks the User has to make, i.e.

• Click on "Start Date" Input field
• Picker opens, Date gets selected
• The closing of the first Picker should open the next Picker (Start Time)
• Closing it opens the next Picker (End Date)
• Closing it opens the next Picker (End Time)

I know how to fire functions on those Events, but I don't know how to open the Pickers programmatically.

Tried a "dirty trick" with jQuery(...).click() or .focus() on the respective element, but it did not work...

Any ideas?

Many thanks in advance!!

Answer 1

I solved this problem adding ref for each datepicker

handleChangeDPOne(){
  this.refs.datePickerTwo.openDialog()
}

handleChangeDPTwo(){
  // something
}

render(){
  return (
    <div>
      <DatePicker ref='datePickerOne' onChange={this.handleChangeDPOne} />
      <DatePicker ref='datePickerTwo' onChange={this.handleChangeDPTwo} />
    </div>
  )
}

I hope that helps.