Material UI datetime-local 输入打开日历下拉菜单答案

【问题标题】：Material UI datetime-local input open the calendar dropdownMaterial UI datetime-local 输入打开日历下拉菜单
【发布时间】：2021-06-23 11:00:56
【问题描述】：

我正在使用以下代码，取自https://material-ui.com/components/pickers/#date-time-pickers

<form className={classes.container} noValidate>
  <TextField
    id="datetime-local"
    label="Next appointment"
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

现在，我想要做的是当用户单击输入中的任意位置时，打开日历下拉菜单。目前只有当用户单击日历图标时它才会打开。我查看了其他答案，但没有得到任何结果。

谢谢。

【问题讨论】：

标签： reactjs calendar material-ui

【解决方案1】：

我建议查看@material-ui/pickers 库（由同一团队开发），而不是使用带有日期时间样式的 TextField 组件。

以下示例来自https://material-ui-pickers.dev/getting-started/usage：

import React, { useState } from 'react';
import DateFnsUtils from '@date-io/date-fns'; // choose your date lib
import {
  DateTimePicker,
  MuiPickersUtilsProvider,
} from '@material-ui/pickers';

const App = () => {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DateTimePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

export default App;

资源：

编辑：

从 Material UI V5（仍处于 alpha 阶段）开始，@material-ui/pickers 将成为 Material UI Lab 包的一部分。

资源：

【讨论】：