我们可以在 material UI 选择器中将 Calender 组件用作独立组件而不使用 Datepicker - 如果可以如何？

Question

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

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

我从这里导入了 Calender：

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

使用方法如下：

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

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

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;

我们可以在 material UI 选择器中将 Calender 组件用作独立组件而不使用 Datepicker - 如果可以如何？

Can we use Calender component in the material UI picker as a standalone component without using the Datepicker - if so How?

calendar

datepicker

reactjs

material-ui