如何使用 Material UI DatePicker 的基本示例答案

【问题标题】：A Basic Example of How to Use Material UI DatePicker如何使用 Material UI DatePicker 的基本示例
【发布时间】：2020-07-08 16:17:27
【问题描述】：

我不知道为什么我不知道如何使用 Material UI 的 DatePicker。文档似乎不完整？我说的对吗？

这是我的基本示例：

import {DatePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
import DateFnsUtils from "@date-io/date-fns";

... somewhere in the render: 

            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                    id="date"
                    value="2017-05-24"
                    allowKeyboardControl={false}
                    autoOk={true}
                />
            </MuiPickersUtilsProvider>

起初我收到一些错误，表明某些东西无法正常工作，那是因为不支持 date-io 或 date-fns（较新版本）。降级后..我被告知 _onChange 不是一个函数。我随机认为我可以添加一个空的 onChange={()=>{}} 来消除该错误，并且确实如此。现在我注意到，当我实际选择一个日期时，我页面上显示的 DatePicker 日期不会更新为新日期。

所以.. 我应该提供 onChange 事件吗？为什么哪里都不清楚？

另外，默认情况下应该更新日期，还是我的 onChange 应该这样做？

更新： 所以.. 事实证明，这个记录 Material UI Pickers 的页面在他们的示例下有一个“查看代码”图标 (https://material-ui.com/components/pickers/)。这显示了如何处理 onChange。我希望在本文档中更明显。

【问题讨论】：

标签： material-ui

【解决方案1】：

使用 v1.x 的@date-io/date-fns
需要通过onChange回调：

function BasicDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <DatePicker
      value={selectedDate}
      onChange={handleDateChange}
    />
  );
}

这里is working example

【讨论】：