我正在使用 Next.js 和react-dates构建一个应用程序。
我有两个组件DateRangePicker组件和DayPickerRangeController组件。
当窗口的宽度大于1180px时，我想渲染DateRangePicker，如果尺寸小于这个，我想渲染DayPickerRangeController。
这是代码：
windowSize > 1180 ?
<DateRangePicker
startDatePlaceholderText="Start"
startDate={startDate}
startDateId="startDate"
onDatesChange={handleOnDateChange}
endDate={endDate}
endDateId="endDate"
focusedInput={focus}
transitionDuration={0}
onFocusChange={(focusedInput) => {
if (!focusedInput) {
setFocus("startDate")
} else {
setFocus(focusedInput)
}
}}
/> :
<DayPickerRangeController
isOutsideRange={day => isInclusivelyBeforeDay(day, moment().add(-1, 'days'))}
startDate={startDate}
onDatesChange={handleOnDateChange}
endDate={endDate}
focusedInput={focus}
onFocusChange={(focusedInput) => {
if (!focusedInput) {
setFocus("startDate")
} else {
setFocus(focusedInput)
}
}}
/>
}
我通常使用反应钩与窗口对象检测窗口屏幕宽度像这
但是我发现ssr的时候这种方式是不可用的，因为ssr渲染没有window对象。
无论ssr如何，是否有另一种方法可以安全地获得窗口大小？
从'react-dates'库中添加SingleDatePicker时,我收到了此错误.尝试了一切,但找不到错误.代码只是显示日历并显示用户选择的日期.请帮忙!这是代码:
import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
export default class ExpenseForm extends React.Component {
state = {
createdAt: moment(),
calenderFocused: false
};
onDateChange = (createdAt) => {
this.setState(() => ({ createdAt }));
};
onFocusChange = ({ focused }) => {
this.setState(() => ({ calenderFocused: focused }));
};
render() {
return (
<div>
<form>
<SingleDatePicker
date={this.state.createdAt}
onDateChange={this.onDateChange}
focused={this.state.calendcalenderFocused}
onFocusChange={this.onFocusChange}
/>
</form>
</div>
);
}
};
我在chrome-dev-tool中遇到的错误:
Uncaught TypeError: Cannot read property …我正在尝试使用带有非英语语言环境（波斯语）的airbnb react-dates并且一切正常，除了当月的第一天。
月份不是从波斯 (Jalaali) 历法的第一天开始到第 30 天，而是从当月的第 10 天开始并持续到下个月的第 10 天。
这个问题甚至存在于他们的例子中。我想知道是否有任何方法可以解决这个问题。
我在反应日期方面遇到问题。我最终得到这个警告：
Failed prop type: The prop `startDateId` is marked as required in `withStyles(DateRangePicker)`, but its value is `undefined`.
根据文档，它指出您需要使用此命令：
npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## react-addons-shallow-compare@>=#.##
我假设哈希值代表您要使用的版本，并且由于它们没有指定任何版本，因此它应该适用于最新版本。
我使用的版本如下：
"react-dates": "^16.0.1", "moment": "^2.20.1", "react": "^16.2.0", "react-dom": "^16.2.0", "react-addons-shallow-compare": "^15.6.2"
在我的组件中，我有以下内容：
import 'react-dates/lib/css/_datepicker.css';
import 'react-dates/initialize';
import { DateRangePicker } from "react-dates";
<DateRangePicker
startDate={this.props.filters.startDate}
endDate={this.props.filters.endDate}
onDatesChange={this.onDatesChange}
focusedInput={this.state.calendarFocused}
onFocusChange={this.onFocusChanged}
/>
谁能告诉我为什么会出现此错误以及如何删除它？
我想知道是否可以添加使用反应日期选择的最大天数。基本上是已经存在的minimumNights属性的倒数。
干杯
在我到达正确的一年之前刷几个月是痛苦的react-dates,是否有可能在年/月添加一些选择？
为react-dates组件设置startDate和endDate的默认值会破坏该组件，并出现以下错误：
我的反应版本：“反应”：“ ^ 16.5.2”“反应日期”：“ ^ 18.1.0”
组件代码：
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 …