Question

我安装了材料-ui＆＃34; ^ 1.0.0-beta.36＆＃34;。文档说明了日期选择器。

但我无法在node_modules\material-ui中找到它，也无法在任何子文件夹中找到它。

更改日志表明计划在将来的版本中支持日期选择器：

1.0.0-beta.17 - 2017年10月16日

随着垃圾收集稳定，我们将能够添加新垃圾   功能，如步进，扩展面板或日期/时间选择器。但我们   还没来。

Answer 1

  import TextField from 'material-ui/TextField';

  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-24"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
  />

Answer 2

Material-ui v1目前提供多个日期选择器。但是，没有特定的DatePicker组件。

相反，您使用type组件的TextField道具指定您需要日期选择器而不是典型的文本输入。这是一个可以为您提供经典日期选择器的示例：

import TextField from 'material-ui/TextField';

<TextField
  type="date"
  defaultValue="2017-05-24"
/>

还有其他采摘者不仅仅是日期。例如：

时间选择器：type="time"
日期和时间选择器：type="datetime-local"

您可以在pickers page of the docs上找到有关此内容的更多信息。

Answer 3

Material-UI npm程序包本身仅支持本地日期选择器，如下所示：

import TextField from '@material-ui/core/TextField';

<TextField
   type="date"
/>

不过，您可以通过以下方式安装Material-UI支持且兼容的npm软件包：

npm i @material-ui/pickers

然后在您的代码中：

import { MuiPickersUtilsProvider } from '@material-ui/pickers';

// pick a date util library
import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';

function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Root />
    </MuiPickersUtilsProvider>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

从https://material-ui-pickers.dev/getting-started/installation的官方文档中粘贴的示例副本

材料是否有日期选择器？

3 个答案: