Material UI 使用日历选择多个日期

Question

我正在从 Material UI 实现这个 Calendar 组件，并且希望能够选择多个日期。当选择另一个日期时，它应该保持突出显示。以下是我到目前为止所拥有的。

import React from 'react';
import Calendar from 'material-ui/DatePicker/Calendar';

class MultiCalendar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            controlledDate: null,
        };
    }

    handleChange = (event, date) => {
        console.log('HERE');
        this.setState({
                controlledDate: date,
            });
         console.log(date);
         console.log(this.state.controlledDate);
    };

render() {
return (
    <Calendar 
        onChange={this.handleChange} 
        value={this.state.controlledDate} 
        className='calendar-test' id='calendar' 
        firstDayOfWeek={0} style={{ width: '500px' }}>
    </Calendar>

        );
      }
    }

export default MultiCalendar

(1) 我可以在这里看到问题已被关闭但我不知道在哪里可以找到解决方案。

(2) onChange 事件不会触发，因为这些语句永远不会出现在控制台中。

任何有关这些问题的帮助都会很棒。谢谢

Answer 1

您可以使用 StaticDatePicker 和 renderDay 属性来允许多个日期。所选日期将保存在values中。

import * as React from "react";
import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import StaticDatePicker from "@mui/lab/StaticDatePicker";
import PickersDay from "@mui/lab/PickersDay";
import startOfDay from "date-fns/startOfDay";

const CustomPickersDay = styled(PickersDay, {
  shouldForwardProp: (prop) => prop !== "selected"
})(({ theme, selected }) => ({
  ...(selected && {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    "&:hover, &:focus": {
      backgroundColor: theme.palette.primary.dark
    },
    borderTopLeftRadius: "50%",
    borderBottomLeftRadius: "50%",
    borderTopRightRadius: "50%",
    borderBottomRightRadius: "50%"
  })
}));

export default function MultiDatePicker() {
  const [values, setValues] = React.useState([startOfDay(new Date())]);

  const findDate = (dates, date) => {
    const dateTime = date.getTime();
    return dates.find((item) => item.getTime() === dateTime);
  };

  const findIndexDate = (dates, date) => {
    const dateTime = date.getTime();
    return dates.findIndex((item) => item.getTime() === dateTime);
  };

  const renderPickerDay = (date, selectedDates, pickersDayProps) => {
    if (!values) {
      return <PickersDay {...pickersDayProps} />;
    }

    const selected = findDate(values, date);

    return (
      <CustomPickersDay
        {...pickersDayProps}
        disableMargin
        selected={selected}
      />
    );
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <StaticDatePicker
        displayStaticWrapperAs="desktop"
        label="Week picker"
        value={values}
        onChange={(newValue) => {
          //copying the values array 
          const array = [...values];
          const date = startOfDay(newValue);
          const index = findIndexDate(array, date);
          if (index >= 0) {
            array.splice(index, 1);
          } else {
            array.push(date);
          }
          setValues(array);
        }}
        renderDay={renderPickerDay}
        renderInput={(params) => <TextField {...params} />}
        inputFormat="'Week of' MMM d"
      />
    </LocalizationProvider>
  );
}

示例中使用的依赖项是：

• @emotion/react 最新（11.8.2）
• @情感/风格最新（11.8.1）
• @mui/lab 最新（5.0.0-alpha.72）
• @mui/material 最新（5.5.0）
• date-fns 最新 (2.28.0)
• 最新反应（17.0.2）
• react-dom 最新（17.0.2）

景色是。

Answer 2

Fitspade，我的显示了同样的内容，我必须修改导入中的一些内容，但当我单击日期时它显示无限循环错误。有人有解决办法吗？