Material UI 日期选择器元素如何从平面或凸起按钮元素触发

Question

我试图从工具栏元素内的凸起按钮打开日期选择器对话框，但没有任何乐趣。

查阅文档后我没有找到解决办法。我试过像这样将日期选择器放在平面按钮中：

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

我想在单击按钮时打开日期选择器对话框。

如有任何帮助，我们将不胜感激

Answer 1

在你的 onTouchTap 事件中，你可以直接将组件从 ReactDOM 渲染到容器元素（通常是 div），因此：

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

它仍然只是一个 React 组件，您仍然可以在它们上面使用 React API :)

Answer 2

您必须从 DatePicker 组件的引用中打开它

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

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

Answer 3

使用 useState 单击按钮打开 material UI 日期选择器。

示例如下：

import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";
const [selectedDate, setSelectedDate] = React.useState(new Date());
const [open, setOpen] = useState(false);

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <button onClick={() => setOpen(isOpen => !isOpen)}>Open Picker</button
  <DatePicker onChange={()=> handleDateChange()} open={open} />
</MuiPickersUtilsProvider>

Material UI 日期选择器元素如何从平面或凸起按钮元素触发

How can a Material UI Date picker element be triggered from a Flat or Raised button element

material-ui