react日历组件

电玩女神 2022-04-05 08:37 764阅读 0赞

一、简单版

效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

代码如下

import React from "react";
    import DatePicker from "react-datepicker";
     
    import "react-datepicker/dist/react-datepicker.css";
     
    class Example extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          startDate: new Date()
        };
        this.handleChange = this.handleChange.bind(this);
      }
     
      handleChange(date) {
        this.setState({
          startDate: date
        });
      }
     
      render() {
        return (
          <DatePicker
            selected={this.state.startDate}
            onChange={this.handleChange}
          />
        );
      }
    }

只需要npm一个就行

npm install react-datepicker --save

二、专门用来获取一个select data

import React, { Component } from 'react';
    import DateRangePicker from '@wojtekmaj/react-daterange-picker';
    class App extends Component {
      state = {
        date: [new Date(), new Date()]
      }
      onChange = date => this.setState({ date })
      render() {
        return (
          <div>
            <DateRangePicker
              onChange={this.onChange}
              value={this.state.date}
              isOpen={true}
            />
          </div>
        );
      }
    }
    export default App;

注意：出现报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

解决办法：react和react-dom 都升级到16.7.0

npm install react-dom@16.7.0
    npm install react@16.7.0

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220405/080556781e114a1ea7cb7841f2379ec1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220405/b0058be3fec040c78a9a49cb9975e775.png