Material UI datetime-local input 打开日历下拉菜单

Question

我正在使用以下代码，摘自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>

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

谢谢。

Answer 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 实验室包的一部分。

资源：

Material UI datetime-local input 打开日历下拉菜单

Material UI datetime-local input open the calendar dropdown

calendar

reactjs

material-ui