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（）

工作的东西

@Path("/builder")
@Produces(MediaType.APPLICATION_JSON)
public class BuilderResource {


    @POST
    @Path("/test")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public Response test(BaseMessage<Content> testContent) {

        System.out.println("hit normal content");
        return Response.ok().build();
    }


    @POST
    @Path("/test2")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    public Response test2(BaseMessage<Content2> testContent) {

        System.out.println("hit String content");
        return Response.ok().build();
    }
}

React Date-picker特定日期范围不起作用

2 个答案: