reactjs - 我们可以在 Material UI 选择器中使用 Calendar 组件作为独立组件而不使用 Datepicker - 如果可以的话如何?

标签 reactjs datepicker calendar material-ui

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

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

我从这里导入了日历:

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

使用它如下:
 <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Calendar date={date}  {...props} />
  </MuiPickersUtilsProvider>

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

最佳答案

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

进口如

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

关于reactjs - 我们可以在 Material UI 选择器中使用 Calendar 组件作为独立组件而不使用 Datepicker - 如果可以的话如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58802690/

相关文章:

javascript - react 路由器 v4 onUpdate

c# - 该字段必须是日期 - DatePicker 验证在 Chrome 中失败 - mvc

javascript - 在提交时将日期格式从 dd M yy 更改为 "2015-01-28T00:00:00+00:00"datepicker

c++ - 在 C++ 效率结构中创建日历应用程序

javascript - React - 如何防止子组件的点击事件

reactjs - react 路由器不渲染组件

javascript - ReactJS 应用程序的开发控制台中出现警告

html - 并排放置 2 个 angularjs 日期选择器,而不是顶部和底部

java - 在Java中查找一个月中的天数

google-api - Google 日历 watch 以获取事件更新