Material UI：如何在 DatePicker 之外使用 DatePickerDialog？

Question

是否可以在没有DatePicker 的情况下使用DatePickerDialog？我想这样做的原因是，与DatePicker 中的TextField 相比，我希望更多地控制现有数据的格式。

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

这是我的代码：

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

请注意，我将其嵌入到一个已经存在的没有反应的应用程序中，这就是我将MuiThemeProvider 放在那里的原因。

另一个考虑因素是能够构建一个衍生品DateTimePicker，它将日期和时间选择器的部分内容整合到无缝体验中。

关于如何在没有 DatePicker 的情况下使用 DatePickerDialog 有什么想法吗？

Answer 1

如何隐藏文本字段组件并使用 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>
  )
}

Answer 2

tl;dr：您需要将firstDayOfWeek 提供给<DatePickerDialog>，否则会呈现损坏状态。

---

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

我在 material-ui 源代码中四处挖掘以查看 <DatePicker> 如何管理 <DatePickerDialog>，并注意到 <DatePicker> 总是为 <DatePickerDialog> 接受的每个道具计算值。

我还看到了如何管理打开/关闭。

这里有一些相关的代码 sn-ps 展示了如何让它工作：

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"
        />
    );
}

P.S.：我觉得很有趣的是，日期选择社区仍然有这种将日期选择器与文本框结合的癖好。例如，参见 4 年前的 this very similar question of mine re: jQuery。