Airbnb反应日期范围选择器仅显示当前月份日历未选择日期月份日历

我试图添加airbnb-react-date。选择开始日期和结束日期后，当我重新打开日期选择器时，日历会显示当前月份而不是所选开始日期/结束日期的月份。Airbnb反应日期范围选择器仅显示当前月份日历未选择日期月份日历

例如：如果我设定开始日期= 2017年5月5日和结束日期= 2017年5月9日话，就说明了选择的日期，但如果我再次点击日历选取打开，只有它显示当前月份，即2月份日历，这就是为什么我必须点击下个月，下个月才能看到之前选择的日期，即5月;

如何，我实现：从https://github.com/airbnb/react-dates#getting-started

安装npm install --save react-dates [email protected]>=#.## [email protected]>=#.## [email protected]>=#.## [email protected]>=#.##

我已经安装了所需的节点包即通天的WebPack。每次我在项目目录上运行命令webpack以构建bundle.js，然后运行index.html以查看输出。

的index.html

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <link rel="stylesheet" type="text/css" href="_datepicker.css"/> 
</head> 
<body><div id="form" style="height: 400px"> 
    <h4>Initial date picker</h4> 

    <div style="margin-left: 4px" id="mydatepicker"></div> 
</div><script async type="text/javascript" src="bundle.js" charset="utf-8"></script> 
</body> 
</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 (
     <div> 
      <DateRangePicker 
       {...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" 
       /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <HomePageDatePicker 
     />, document.getElementById('mydatepicker') 
);

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'] 
     } 
     } 
    ] 
    } 
};

我拥有的一切：

我需要什么：

来源

2017-02-28 Always Sunny

总是晴朗的，有没有什么办法来为这个datepicker插件设置一个预定义的日期？如果是的话，当你试图强制设定一个你想要的日期时会发生什么！ – Sabbir

在反应-日期为表示storybook你可以做到这一点与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, 
     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 (
     <div> 
      <DateRangePicker 
       {...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} 
       /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <HomePageDatePicker 
     />, document.getElementById('mydatepicker') 
);

来源

2017-12-12 01:00:47

Airbnb反应日期范围选择器仅显示当前月份日历未选择日期月份日历

回答

相关问题