แสดงวันที่หลายวันใน React Calendar

ฉันต้องการแสดงหลายวันโดยใช้ปฏิทินโต้ตอบ (https://www.npmjs.com/package/react-calendar) ปัญหาอยู่ที่ปฏิทินจะเลือกวันที่ทั้งหมดในระหว่างนั้น แทนที่จะเลือกวันที่แต่ละวันแยกกัน

เช่น ฉันมีวันที่ 2 วันที่ 4 มิถุนายน 2019 และ 9 มิถุนายน 2019 ปฏิทินควรเลือกเฉพาะวันที่ 4 และ 9 แต่ก็เลือกวันที่ 5, 6, 7 และ 8 ด้วย ฉันต้องการเลือกเฉพาะวันที่ 4 มิถุนายนและ 9 มิถุนายน ฉันแนบตัวอย่างสิ่งที่ฉันต้องการนำไปใช้โดยใช้ react-dates 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
ไม่ใช่ด้วยปฏิทินโต้ตอบ ฉันเปลี่ยนไปใช้ react-dates 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 โปรดวางรหัสการทำงานของคุณบน codesandbox.io และแชร์ URL สาธารณะที่นี่ - person NN796; 10.07.2019