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

时间:2016-09-21 14:10:23

标签: reactjs material-ui

我正在做一个使用React和Material Design的项目。 我想和How can I attach a custom membership provider in my ASP.NET MVC application?一起去,因为我需要花哨的数据和时间选择器,这个库作为组件提供。

由于我必须在应用程序的特定步骤中设置“开始时间”和“结束时间”以及“日期”,因此我希望“跳过”#34;从一个Picker到下一个Picker减少用户必须做的点击,即

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

我知道如何触发这些事件的功能,但我不知道如何以编程方式打开选择器。

尝试了一个肮脏的伎俩"使用jQuery(...)。click()或.focus()在相应的元素上,但它不起作用...

有什么想法吗?

非常感谢提前!!

1 个答案:

答案 0 :(得分:3)

我解决了这个问题,为每个ref

添加datepicker
handleChangeDPOne(){
  this.refs.datePickerTwo.openDialog()
}

handleChangeDPTwo(){
  // something
}

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

我希望有所帮助。