Отображение нескольких дат в React Calendar

Я хочу отображать несколько дат с помощью календаря реакции (https://www.npmjs.com/package/react-calendar). Проблема заключается в том, что календарь выбирает все даты между ними, а не каждую дату по отдельности.

Например, у меня есть две даты: 4 июня 2019 г. и 9 июня 2019 г. В календаре должны быть выбраны только 4-е и 9-е, но также выбраны 5-е, 6-е, 7-е и 8-е. Я хочу выбрать только 4 и 9 июня. Я приложил пример того, что я хочу реализовать, используя дату реакции DayPickerSingleDateController. Можно ли реализовать то же самое, но с помощью React-Calendar?

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

Первое изображение

Я ожидаю, что в календаре будут показаны только эти 2 даты, а не дни между ними.

Второе изображение


reactjs javascript calendar
person Duane Lausell    schedule 09.07.2019    source источник
comment
Здравствуйте, вы решили эту проблему?   -  person Влад Макух    schedule 11.06.2020
comment
Только не с реактивным календарем. Я переключился на DayPickerSingleDateController с датами реагирования, и он работает довольно хорошо. airbnb.io/react-dates/? путь = / история /   -  person Duane Lausell    schedule 12.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Это поможет:

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 поможет вам достичь поставленной цели. Вот исходный код.

person NN796    schedule 09.07.2019
comment
Я ценю быстрый ответ. Я не уверен, достаточно ли ясно выразился, прошу прощения, но я хочу отображать 4 июня 2019 г. и 9 июня 2019 г. по отдельности, а не с диапазоном. - person Duane Lausell; 09.07.2019
comment
@DuaneLausell, не могли бы вы вставить свой рабочий код в codeandbox.io и поделиться его общедоступным URL-адресом здесь. - person NN796; 10.07.2019