如何使用react-date-picker实现开始日期与结束日期选择功能

前置准备 #

先安装社区常用的react-datepicker依赖包，同时需要引入配套样式：

• 安装命令：

npm install react-datepicker date-fns
# 或者用yarn
yarn add react-datepicker date-fns

• 组件内引入样式：

import 'react-datepicker/dist/react-datepicker.css'

基础实现代码 #

核心逻辑是维护两个日期状态，同时给两个选择器加交叉限制，避免出现结束日期早于开始日期的异常情况：

import { useState } from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

function DateRangePicker() {
  // 声明开始、结束日期两个状态
  const [startDate, setStartDate] = useState(null)
  const [endDate, setEndDate] = useState(null)

  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <div>
        <label>开始日期：</label>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          // 限制开始日期最大不能超过已选的结束日期
          maxDate={endDate}
          dateFormat="yyyy-MM-dd"
          placeholderText="选择开始日期"
        />
      </div>
      <div>
        <label>结束日期：</label>
        <DatePicker
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          // 限制结束日期最小不能早于已选的开始日期
          minDate={startDate}
          dateFormat="yyyy-MM-dd"
          placeholderText="选择结束日期"
        />
      </div>
    </div>
  )
}

export default DateRangePicker

常用拓展配置 #

• 如果需要同时选择时间，给两个DatePicker组件添加showTimeSelect属性，同时把dateFormat调整为yyyy-MM-dd HH:mm即可
• 如果需要预设常用范围（比如最近7天、最近30天），可以额外加按钮组绑定点击事件，直接给startDate和endDate赋值对应时间范围
• 如果需要禁用特定日期（比如周末、法定节假日），可以添加filterDate属性，返回布尔值控制日期是否可选

内容的提问来源于stack exchange，提问作者Maaz Parkar