分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – Airbnb反应日期范围选择器仅显示当前月份日历未选择日期月份日历，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试添加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


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 (
        {...this.props}
              onDatesChange={this.onDatesChangE}
              onFocusChange={this.onFocusChangE}
              focusedInput={focusedInput}
              startDate={startDatE}
              endDate={endDatE}
              startDatEID="datepicker_start_home"
              endDatEID="datepicker_end_home"
              startDatePlaceholderText="check In"
              endDatePlaceholderText="check Out"
              />
        );
  }
}

ReactDOm.render(
    );

webpack.config.js

@H_882_16@module.exports = {
  entry: "./entry.js",output: {
    path: __dirname,fil@R_450_8371@: "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}执行此操作.

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,endDate } = this.state;
    return (
        {...this.props}
              onDatesChange={this.onDatesChangE}
              onFocusChange={this.onFocusChangE}
              focusedInput={focusedInput}
              startDate={startDatE}
              endDate={endDatE}
              startDatEID="datepicker_start_home"
              endDatEID="datepicker_end_home"
              startDatePlaceholderText="check In"
              endDatePlaceholderText="check Out"
              initialVisibleMonth={endDatE}
              />
        );
  }
}

ReactDOm.render(
    );