React Date-picker Конкретный диапазон дат не работает

Question

Я хочу выделить определенный диапазон дат (через 6 дней после выбранной даты). Я попробовал это. но не работает. Каким будет решение? Вот пример кода, который я см

import React from "react"; 
import moment from 'moment'; 
import DayPicker, { DateUtils } from "react-day-picker"; 

import "react-day-picker/lib/style.css"; 

export default class DisabledDays extends React.Component { 

state = { 
from: null, 
to:null, 
}; 

handleDayClick(e, day, modifiers) { 
const range = DateUtils.addDayToRange(day, this.state); 
    this.setState(range); 
} 
handleChange = (day) => { 
console.log("newDate", day); 
return this.setState({date: day}); 
} 

render() { 
const { from, to} = this.state; 
// Add the `selected` modifier to the cell of the clicked day 
const modifiers = { 
    //disabled: DateUtils.isPastDay, 
    //selected: day => DateUtils.isSameDay(this.state.from, day), 
    selected:day => DateUtils.isDayInRange(day, this.state) 
}; 

return <DayPicker selected={this.state.startDate} enableOutsideDays modifiers={ modifiers } onDayClick={ this.handleChange } minDate={moment()} maxDate={moment().add(5, 'days')} 
    placeholderText="Select a date between today and 5 days in the future" />; 
} 
} 

Answer 1

Наконец я решил. Необходимо правильно использовать момент js.

import React from "react"; 
import moment from 'moment'; 
import DayPicker from "./DayPicker"; 
import DateUtils from "./DateUtils"; 
export default class DisabledDays extends React.Component { 
    state = { 
    from: null, 
    to:null, 
    }; 
    handleDayClick(e, day, modifiers) { 
    var target = moment(day).add(6, 'day')._d; 
    this.state.to=target 
    this.state.from=day 
    console.log(this.state) 
    this.setState(this.state); 
    } 
    render() { 
    const { from, to} = this.state; 
    console.log(from+"-"+to) 
    const modifiers = { 
     selected:day => DateUtils.isDayInRange(day, {from:from,to:to}) 
    }; 
    return <DayPicker enableOutsideDays modifiers={ modifiers } onDayClick={ this.handleDayClick.bind(this) } minDate={moment()} maxDate={moment().add(5, 'days')} 
     placeholderText="Select a date between today and 5 days in the future" />; 
    } 
} 

Answer 2

У меня есть то, что работает ДБЯ с помощью handleDayClick()

import React from "react"; 
import moment from 'moment'; 
import DayPicker, {DateUtils} from "react-day-picker"; 

import "react-day-picker/lib/style.css"; 

export default class DisabledDays extends React.Component { 

    state = { 
    from: null, 
    to: null, 
    }; 

    handleDayClick = (e, day, modifiers) => { 
    const range = DateUtils.addDayToRange(day, this.state); 
    this.setState(range); 
    } 

    handleChange = (day) => { 
    console.log("newDate", day); 
    return this.setState({date: day}); 
    } 

    render() { 
    const {from, to} = this.state; 
    // Add the `selected` modifier to the cell of the clicked day 
    const modifiers = { 
     //disabled: DateUtils.isPastDay, 
     //selected: day => DateUtils.isSameDay(this.state.from, day), 
     selected: day => DateUtils.isDayInRange(day, this.state) 
    }; 

    return <DayPicker selected={this.state.startDate} enableOutsideDays modifiers={ modifiers } 
         onDayClick={ this.handleDayClick } minDate={moment()} maxDate={moment().add(5, 'days')} 
         placeholderText="Select a date between today and 5 days in the future"/>; 
    } 
}