我们可以在不使用日期选择器的情况下，将材质UI选择器中的日历组件用作独立组件吗?如果可以，如何

Question

我正在尝试开发一个日期选择器，选择日期、月份和年份作为值列表，但也希望使用日历功能(带有日期选择和图标(，这样用户就可以使用select标记(dd-mm-yyyy(或日历中的值列表来选择日期。

如何在没有usingn KeyBoardDatePicker等的情况下将日历作为独立日历使用

我从这里进口了Calender：

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';

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

Answer 2

它工作于

import React, { useState } from "react";
import { Paper } from "@material-ui/core";
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, Calendar } from "@material-ui/pickers";
import idLocale from "date-fns/locale/id";
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
const theme = createMuiTheme({
palette: {
primary: { light: green[300], main: green[500], dark: green[700] },
},
});
function MyCalendar() {
const [selectedDate, setSelectedDate] = useState(new Date());
const handleDateChange = (date) => {
setSelectedDate(date);
};
return (
<MuiThemeProvider theme={theme}>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={idLocale}>
<Paper style={{ overflow: "hidden" }}>
<Calendar
date={selectedDate}
onChange={handleDateChange}
/>
</Paper>
</MuiPickersUtilsProvider>
</MuiThemeProvider>
);
}
export default MyCalendar;