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

Question

是否可以在没有DatePickerDialog的情况下使用DatePicker？我想这样做的原因是我希望能够更好地控制现有数据的格式，而不是TextField允许的DatePicker。

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

这是我的代码：

  <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>接受的每个道具计算值。

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

以下是一些相关的代码段，展示了如何让它发挥作用：

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。