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

Posted 2023-02-22

【中文标题】我们是不是可以在不使用 Datepicker 的情况下将材质 UI 选择器中的 Calendar 组件用作独立组件 - 如果可以，如何？

【英文标题】：Can we use Calender component in the material UI picker as a standalone component without using the Datepicker - if so How?我们是否可以在不使用 Datepicker 的情况下将材质 UI 选择器中的 Calendar 组件用作独立组件 - 如果可以，如何？

【发布时间】：2020-03-07 05:15:27

【问题描述】：

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

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

我已经从这里导入了日历：

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

如下使用：

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

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

【参考方案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

【讨论】：

我只是厌倦了在这段代码中使用日历，但它会引发错误“无法在上下文中找到实用程序......”stackblitz.com/edit/yzybde-eydaew?file=demo.js

请再读一遍答案。您必须使用正确的导入

我刚刚遵循了本指南 (material-ui-pickers.dev/guides/static-components)。此日历可以用作事件调度器和查看器，包括周、日和月。是否还提供任何自定义样式？

如果提供一个工作示例将有很大帮助。

文档页面上有工作示例。这是一个具有相同代码的纯代码框

【参考方案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;