在Material UI库中以编程方式打开日期/时间选择器 [英] Opening date/time picker programatically in Material UI library

问题描述

我正在做一个使用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.

• 点击开始日期"输入字段
• 选择器打开，选择日期
• 关闭第一个选择器应打开下一个选择器(开始时间)
• 关闭它会打开下一个选取器(结束日期)
• 关闭它会打开下一个选取器(结束时间)

我知道如何在这些事件上触发功能，但是我不知道如何以编程方式打开选择器.

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库中以编程方式打开日期/时间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！