[英]Setting the default startDate and endDate properties for react-dates
Setting default values for startDate and endDate for the react-dates component breaks the component with the error below:为 react-dates 组件设置 startDate 和 endDate 的默认值会破坏组件并显示以下错误:
My react version: "react": "^16.5.2" "react-dates": "^18.1.0"我的反应版本:“反应”:“^16.5.2”“反应日期”:“^18.1.0”
Component code:组件代码:
import React from 'react'
import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
class DateRangeSelector extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: moment().subtract(2, 'year'),
endDate: moment(),
// focusedInput: 'startDate'
}
}
render() {
return (
<DateRangePicker
startDate={this.state.startDate} // momentPropTypes.momentObj or null,
startDateId={this.props.startDateInputId} // PropTypes.string.isRequired,
endDate={this.state.endDate} // momentPropTypes.momentObj or null,
endDateId={this.props.endDateInputId} // PropTypes.string.isRequired,
onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
isOutsideRange={() => false}
focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
/>
)
}
}
DateRangeSelector.defaultProps = {
startDateInputId: 'start-date-field',
endDateInputId: 'end-date-field',
}
export default DateRangeSelector
Error:错误:
DayPickerRangeController.js:1336 Uncaught TypeError: day.isBetween is not a function
at DayPickerRangeController.isInSelectedSpan (DayPickerRangeController.js:1336)
at Object.selectedSpan [as selected-span] (DayPickerRangeController.js:383)
at DayPickerRangeController.js:1074
at Array.filter (<anonymous>)
at DayPickerRangeController.getModifiersForDay (DayPickerRangeController.js:1073)
at DayPickerRangeController.js:1058
at Array.forEach (<anonymous>)
at DayPickerRangeController.js:1057
at Array.forEach (<anonymous>)
at DayPickerRangeController.getModifiers (DayPickerRangeController.js:1055)
isInSelectedSpan @ DayPickerRangeController.js:1336
selectedSpan @ DayPickerRangeController.js:383
(anonymous) @ DayPickerRangeController.js:1074
getModifiersForDay @ DayPickerRangeController.js:1073
(anonymous) @ DayPickerRangeController.js:1058
(anonymous) @ DayPickerRangeController.js:1057
getModifiers @ DayPickerRangeController.js:1055
getStateForNewMonth @ DayPickerRangeController.js:1099
DayPickerRangeController @ DayPickerRangeController.js:439
constructClassInstance @ react-dom.development.js:11769
updateClassComponent @ react-dom.development.js:13491
beginWork @ react-dom.development.js:14090
performUnitOfWork @ react-dom.development.js:16416
workLoop @ react-dom.development.js:16454
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
replayUnitOfWork @ react-dom.development.js:15745
renderRoot @ react-dom.development.js:16548
performWorkOnRoot @ react-dom.development.js:17387
performWork @ react-dom.development.js:17295
performSyncWork @ react-dom.development.js:17267
interactiveUpdates$1 @ react-dom.development.js:17558
interactiveUpdates @ react-dom.development.js:2208
dispatchInteractiveEvent @ react-dom.development.js:4913
react-dom.development.js:14550 The above error occurred in the <DayPickerRangeController> component:
in DayPickerRangeController (created by DateRangePicker)
in div (created by DateRangePicker)
in div (created by OutsideClickHandler)
in OutsideClickHandler (created by DateRangePicker)
in div (created by DateRangePicker)
in DateRangePicker (created by withStyles(DateRangePicker))
in withStyles(DateRangePicker) (created by DateRangeSelector)
in div (created by DateRangeSelector)
in div (created by DateRangeSelector)
in DateRangeSelector
I was able to follow the docs and got it to work.我能够按照文档进行操作并使其正常工作。 Try utilizing React
state
instead of defaultProps
.尝试使用 React
state
而不是defaultProps
。 Please note, that there's some CSS
jank going on with the module.请注意,该模块出现了一些
CSS
卡顿。
Working example:工作示例:
components/DateRangeSelector/index.js组件/DateRangeSelector/index.js
import React, { Component } from "react";
import { DateRangePicker } from "react-dates";
import moment from "moment";
import "./styles.css";
class DateRangeSelector extends Component {
state = {
startDate: moment().subtract(2, "year"),
endDate: moment(),
focusedInput: null
};
handleDateChange = ({ startDate, endDate }) =>
this.setState({ startDate, endDate });
handleFocusChange = focusedInput => this.setState({ focusedInput });
render = () => (
<DateRangePicker
endDate={this.state.endDate}
endDateId="endDate"
focusedInput={this.state.focusedInput}
isOutsideRange={() => null}
onDatesChange={this.handleDateChange}
onFocusChange={this.handleFocusChange}
startDate={this.state.startDate}
startDateId="startDate"
/>
);
}
export default DateRangeSelector;
index.js索引.js
import React from "react";
import { render } from "react-dom";
import DateRangeSelector from "./components/DateRangeSelector";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import "./styles.css";
const App = () => (
<div className="app">
<h2>Date Range Picker</h2>
<DateRangeSelector />
</div>
);
render(<App />, document.getElementById("root"));
components/DateRangeSelector/styles.css组件/DateRangeSelector/styles.css
.DateRangePickerInput_arrow {
width: 40px;
}
.DateInput_input {
cursor: pointer;
}
styles.css样式文件
.app {
font-family: sans-serif;
text-align: center;
}
* {
box-sizing: border-box;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.