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

Posted 2023-02-22

【中文标题】Material UI：如何在 DatePicker 之外使用 DatePickerDialog？

【英文标题】：Material UI: How to use DatePickerDialog outside of DatePicker?

【发布时间】：2016-10-30 08:25:25

【问题描述】：

是否可以在没有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 有什么想法吗？

【参考方案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>
  )

【参考方案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。

【讨论】：

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