【问题标题】: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 包的一部分。

    资源:

    【讨论】:

      猜你喜欢
      • 2018-06-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-03
      • 1970-01-01
      • 2021-01-25
      • 1970-01-01
      相关资源
      最近更新 更多