时间戳

首页 > 解决方案 > 我们是否可以在不使用 Datepicker 的情况下将材质 UI 选择器中的 Calender 组件用作独立组件 - 如果可以，如何？

reactjs - 我们是否可以在不使用 Datepicker 的情况下将材质 UI 选择器中的 Calender 组件用作独立组件 - 如果可以，如何？

问题描述

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

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

我从这里导入了日历：

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

如下使用它：

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

实用程序上下文未正确传递给日历组件 - 我在这里遗漏了一些明显的东西吗？

标签： reactjsdatepickercalendarmaterial-ui

解决方案

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

进口喜欢

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

推荐阅读