[英]React Date-picker Specific Date range not working
I want to highlight specific date range (6 Days after selected date). 我要突出显示特定的日期范围(选定日期后6天)。 I tried this one .
我尝试了这个。 but not working .what will be the solution ?
但不能正常工作。解决方案是什么? Here is sample code that i refer
这是我引用的示例代码
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" />;
}
}
Finally I solved it. 终于我解决了。 Have to use moment js correctly .
必须正确使用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" />;
}
}
I have something that works bby using your handleDayClick() 我有一些可以使用您的handleDayClick()在bby上工作的东西
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"/>;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.