反应日期选择器特定日期范围不起作用

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

我有一些东西可以使用你的句柄 Click()

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"/>;
  }
}

Answer 2

终于解决了。一定要正确使用moment 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" />;
  }
}

反应日期选择器特定日期范围不起作用

React Date-picker Specific Date range not working

datepicker

momentjs

reactjs

react-day-picker