我正在尝试添加airbnb-react-date.在我重新打开日期选择器时选择开始日期和结束日期后,日历显示当前月份而不是选定的开始日期/结束日期月份.
例如：如果我设置开始日期= 2017-05-05和结束日期= 2017-05-09然后它显示所选日期,但如果我再次单击日历选择器打开,它只显示当前月份即二月日历,那是为什么我必须点击下个月,下个月查看之前选择的日期,即5月;
我是如何实施的：从https://github.com/airbnb/react-dates#getting-started开始
安装npm install –save react-dates moment @> =#.## react @> =#.## react-dom @> =#.## react-addons-shallow-compare @> =# ##
我已经安装了所需的节点包,即babel,webpack.每次我在项目目录上运行命令webpack来构建bundle.js然后运行index.html来查看输出.
的index.html
Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
entry.js
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { DateRangePicker } from 'react-dates';
var SelectedStartDate = moment('2017-05-05');
var SelectedEndDate = moment('2017-05-09');
class HomePageDatePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
focusedInput: null,startDate: SelectedStartDate,endDate:SelectedEndDate
};
this.onDatesChange = this.onDatesChange.bind(this);
this.onFocusChange = this.onFocusChange.bind(this);
}
onDatesChange({ startDate,endDate }) {
this.setState({ startDate,endDate });
}
onFocusChange(focusedInput) {
this.setState({ focusedInput });
}
render() {
const { focusedInput,startDate,endDate } = this.state;
return (
webpack.config.js
module.exports = {
entry: "./entry.js",output: {
path: __dirname,filename: "bundle.js"
},module: {
loaders: [
{ test: /\.css$/,loader: "style!css" },{
test: /\.(js|jsx)$/,exclude: /(node_modules|bower_components)/,loader: 'babel-loader',query: {
presets: ['es2015','stage-0','react'],plugins: ['transform-runtime']
}
}
]
}
};
我有什么：
我需要的：
最佳答案
如react-date storybook中所述,您可以在render函数上使用initialVisibleMonth = {endDate}执行此操作.
原文链接：https://www.f2er.com/js/429145.htmlimport React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { DateRangePicker } from 'react-dates';
var SelectedStartDate = moment('2017-05-05');
var SelectedEndDate = moment('2017-05-09');
class HomePageDatePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
focusedInput: null,endDate } = this.state;
return (
