我们可以在材质 UI 选择器中使用日历组件作为独立组件而不使用日期选择器 - 如果是这样如何？

Question

我正在尝试开发一个日期选择器，选择日月和年作为值列表，但是也想使用日历功能（带有日期选择和图标），以便用户可以使用来自选择标签的值列表（dd - mm-yyyy) 或日历选择日期。

如何在不使用 KeyBoardDatePicker 等的情况下将日历用作独立的日历。

我从这里导入了日历：

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

使用它如下：

 <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Calendar date={date}  {...props} />
  </MuiPickersUtilsProvider>

util 上下文没有正确传递给 Calendar 组件 - 我在这里遗漏了一些明显的东西吗？

Answer 1

是的，你的问题实际上来自进口。

进口如

import { Calendar } from '@material-ui/pickers'

完全不同于

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

您需要以Calendar与导入相同的方式导入MuiPickersUtilsProvider。然后就可以访问 utils 并且可以使用日历了。这是官方文档： https: //material-ui-pickers.dev/guides/static-components