Reactjs 材质UI：如何在DatePicker之外使用DatePickerDialog？

是否可以在不使用日期选择器的情况下使用日期选择器对话框？我之所以要这样做，是因为我希望对现有数据的格式进行更多的控制，而不是

DatePicker

中的

TextField

所允许的控制

我试过了，这就是我得到的，所有的日期都是乱七八糟的：

这是我的密码：

  <MuiThemeProvider>
    <div>
      <span onClick={this.handleClick}>Open</span>
      <DatePickerDialog
        ref="dialogWindow"
        container="inline"
        mode="landscape"
      />
    </div>
  </MuiThemeProvider>

打开

请注意，我正在将其嵌入一个已经存在的应用程序中，而该应用程序不是react，因此我将

MuiThemeProvider

放在那里

另一个考虑因素是能够构建一个衍生工具，

DateTimePicker

，它将日期和时间选择器的一部分整合到一个无缝体验中

---

关于如何在不使用日期选择器的情况下使用DatePickerDialog有什么想法吗？

隐藏文本字段组件并使用ref显示对话框，然后使用

onChange

回调来获取所选值如何

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

render(){
  return (
    <div>
      <RaisedButton onTouchTap={this.openDatePicker} label='open date picker' />
      <DatePicker textFieldStyle={{ display: 'none' }} ref='datepicker' />
    </div>
  )
}

openDatePicker（）{
this.refs.datepicker.openDialog（）
}
render（）{
返回(
)
}

tl；dr：您需要向

提供

firstDayOfWeek

，否则它将以中断状态呈现

---

我遇到了与您相同的布局问题，解决方案只是指定更多道具。我还遇到了一个问题，单击对话框上的任意位置导致对话框关闭（即年和月控件不起作用）

我在material ui源代码中翻找，查看

如何管理

，并注意到

总是为

接受的每个道具计算值

我还了解了如何管理打开/关闭

以下是一些相关的代码片段，展示了如何使其工作：

openDatePicker = (event) => {
    this.dueDatePicker.show();
};


closeDatePicker = () => {
    this.dueDatePicker.dismiss();
};

render() {
    return (
        <DatePickerDialog
            ref={(e) => this.dueDatePicker = e}
            initialDate={this.state.date}
            firstDayOfWeek={0}
            mode="portrait"
        />
    );
}

openDatePicker=（事件）=>{
this.dueDatePicker.show（）；
};
closeDatePicker=（）=>{
this.dueDatePicker.discouse（）；
};
render（）{
返回(
this.dueDatePicker=e}
initialDate={this.state.date}
firstDayOfWeek={0}
mode=“纵向”
/>
);
}

注：对我来说很有趣的是，采摘日期的社区仍然有这种把采摘日期的人和文本框结婚的癖好。例如，请参见4年前的re:jQuery。

Tom，我认为这种“崇拜”通常与让DatePicker允许键盘访问有关，这对于以键盘为中心的UI和可访问性来说都是非常好的。