在Material UI库中以编程方式打开日期/时间选择器

问题描述

我正在做一个使用React和Material Design的项目.我想使用材质UI ，因为我需要精美的Dat-和Time Pickers，该库作为组件提供.

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.

在相应的元素上使用jQuery(...).click()或.focus()尝试了肮脏的把戏"，但此方法不起作用...

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

有什么想法吗?

非常感谢！

推荐答案

我解决了这个问题，为每个datepicker

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>
  )
}

我希望能帮上忙.

这篇关于在Material UI库中以编程方式打开日期/时间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！