reactjs - Material 用户界面 : How to use DatePickerDialog outside of DatePicker?

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

tl;dr:您需要提供firstDayOfWeek至<DatePickerDialog> ，或者它呈现为损坏状态。

<小时/>

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

我在material-ui源代码中进行了挖掘，看看如何<DatePicker>管理<DatePickerDialog> ，并注意到<DatePicker>始终计算 <DatePickerDialog> 的每个 Prop 的值接受。

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

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

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.:对我来说很有趣的是，日期选择社区仍然有这种将日期选择器与文本框结合起来的迷恋。例如，参见 this very similar question of mine 4 年前回复:jQuery。