[英]Identify selected date range in react-date-range
I am using react-date-range plugin to select a date range.我正在使用 react-date-range 插件来选择日期范围。
import { DateRangePicker} from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
Following function is used to handle the date range when a range is selected以下函数用于在选择范围时处理日期范围
function handleSelect() {
}
I have added the DateRangePicker like this我已经像这样添加了 DateRangePicker
const selectionRange = {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
}
<div>
<DateRangePicker
ranges={[selectionRange]}
onChange={handleSelect}/>
</div>
I want to make some operations on the selected date range in side the handleChange function.我想在 handleChange 函数旁边的选定日期范围内进行一些操作。 But I cannot find how to identify which date range is selected and the respective start and end dates.但我找不到如何确定选择了哪个日期范围以及各自的开始和结束日期。
In documentation onChange callback is described as在文档 onChange 回调被描述为
But I cannot understand how to get these startDate and endDate parameters.但我无法理解如何获取这些 startDate 和 endDate 参数。 Can someone help me to get this values.有人能帮我得到这个值吗?
Documentation: https://openbase.io/js/react-date-range/documentation文档: https : //openbase.io/js/react-date-range/documentation
According to the documentation the onChange
callback receives the ranges
as an argument:根据文档, onChange
回调接收ranges
作为参数:
import { DateRangePicker } from 'react-date-range';
class MyComponent extends Component {
handleSelect(ranges){
console.log(ranges);
// {
// selection: {
// startDate: [native Date Object],
// endDate: [native Date Object],
// }
// }
}
render(){
const selectionRange = {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
}
return (
<DateRangePicker
ranges={[selectionRange]}
onChange={this.handleSelect}
/>
)
}
}
It should be an object that has a key selection
which is itself an object that contains the startDate
and endDate
.它应该是一个具有键selection
的对象,该对象本身就是一个包含startDate
和endDate
的对象。
My solution is:我的解决办法是:
const onChange = (item) => {
if (item.selection.endDate !== item.selection.startDate) {
console.log(item);
setIsPopoverOpen(false);
}
setRange([item.selection]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.