如何不使用Hooks在React项目中添加react-datepicker日期选择器

1. 安装依赖 #

首先执行npm命令安装包：
npm install react-datepicker

2. 引入组件与样式 #

在你的类组件文件顶部引入依赖：

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
// 必须引入配套样式，否则组件显示异常
import "react-datepicker/dist/react-datepicker.css";

3. 初始化状态 #

在类组件的state中添加对应日期存储字段：

class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始值可以设为null（空选择）或者new Date()（默认选中当前日期）
      selectedDate: null
    };
  }

4. 编写日期变更处理方法 #

注意react-datepicker的onChange回调直接返回选中的Date对象，不是原生事件对象，不需要取e.target.value：

handleDateChange = (date) => {
    this.setState({
      selectedDate: date
    });
  }

如果你要复用原有通用的handleChange方法，也可以适配写法：

// 原有通用handleChange
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  // 适配日期选择器的包装方法
  handleDateWrap = (date) => {
    this.handleChange({
      target: {
        name: 'selectedDate',
        value: date
      }
    })
  }

5. 渲染组件 #

在render方法中调用DatePicker组件，绑定对应属性即可：

render() {
    return (
      <div>
        <DatePicker
          selected={this.state.selectedDate}
          onChange={this.handleDateChange}
          // 其他可选配置，比如日期格式、占位符等
          dateFormat="yyyy/MM/dd"
          placeholderText="请选择日期"
        />
      </div>
    )
  }
}

export default YourComponent;

注意事项 #

• 如果需要实现范围选择、时间选择等功能，直接配置对应属性即可，状态绑定逻辑一致
• 日期格式配置支持自定义，按照dateFormat属性的规则传入对应字符串即可

内容的提问来源于stack exchange，提问作者john s