在 React Calendar 上显示多个日期

Question

我想使用 React Calendar 显示多个日期（https://www.npmjs.com/package/react-calendar）。问题在于日历选择中间的所有日期，而不是单独选择每个日期。

例如，我有两个日期：2019年6月4日和2019年6月9日。日历应该只选择4号和9号，但它也会选择5号、6号、7号和8号。我只想选择 Jun 4 和 Jun 9。我附上了一个我想使用react-dates DayPickerSingleDateController 实现的示例。是否可以使用react-calendar来实现同样的事情？

<Calendar
  value={[new Date(2019, 5, 4), new Date(2019, 5, 9)]}
/>

第一张图片

我希望日历只显示这 2 个日期，而不显示 中的日期 之间。

第二张图片

Answer 1

这会有所帮助：

import React, { Component } from 'react';
import Calendar from 'react-calendar';

class MyApp extends Component {
  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  render() {
    return (
      <div>
        <Calendar
          onChange={this.onChange}
          value={this.state.date}
          selectRange={true}
        />
      </div>
    );
  }
}

selectRange

将帮助您实现目标。这是来源。

Answer 2

这可以通过向所选日期添加类而不是按如下方式设置日历的值来实现：

import React, { useState } from 'react'
import ReactCalendar from 'react-calendar'

const Calendar = () => {
    const [dates, setDates] = useState([])

    const dateAlreadyClicked = (dates, date) => dates.some(
        d => new Date(d).getTime() === new Date(date).getTime()
    )

    const datesExcept = (dates, date) => dates.filter(
        d => new Date(d).getTime() !== new Date(date).getTime()
    )

    const onClickDay = date => {
        if (dateAlreadyClicked(dates, date)) {
            setDates(existingDates => datesExcept(existingDates, date))
        } else {
            setDates(existingDates => [...existingDates, date])
        }
    }

    const tileClassName = ({ date }) => {
        if (dateAlreadyClicked(dates, date)) {
            return 'react-calendar__tile--active'
            /* this is react-calendar's default class name for an active
            tile, but you can use any custom class name of your choice */
        }
    }

    return (
        <ReactCalendar
            onClickDay={onClickDay}
            tileClassName={tileClassName}
        />
    )
}

来源：https://github.com/wojtekmaj/react-calendar/issues/136#issuecomment-475086289