如何使用react-datepicker一次性选择多个日期？

当然可以！react-datepicker本身就内置了多日期选择的功能，完全不需要依赖其他工具包就能搞定。下面我给你一步步拆解实现方式：

基础实现步骤 #

1. 确保依赖正确安装
   先确认你已经安装了react-datepicker和它的核心依赖，如果还没装，执行：

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

   别忘了导入组件的默认样式，否则日历的显示会异常：

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

2. 核心代码实现
   关键在于给DatePicker组件加上isMulti属性，同时把selected状态设置为数组类型来存储选中的日期，onChange回调也需要处理数组格式的参数：

   import React, { useState } from 'react';
   import DatePicker from 'react-datepicker';
   import 'react-datepicker/dist/react-datepicker.css';
   
   const MultiDatePicker = () => {
     // 用数组存储选中的多个日期
     const [selectedDates, setSelectedDates] = useState([]);
   
     const handleDateChange = (dates) => {
       setSelectedDates(dates);
     };
   
     return (
       <div>
         <h3>选择多个日期</h3>
         <DatePicker
           selected={selectedDates}
           onChange={handleDateChange}
           isMulti // 开启多日期选择核心属性
           dateFormat="yyyy/MM/dd"
           placeholderText="点击选择多个日期"
         />
         {/* 可选：展示已选中的日期 */}
         <div style={{ marginTop: '1rem' }}>
           <strong>已选中日期：</strong>
           {selectedDates.length > 0 ? (
             selectedDates.map((date, idx) => (
               <span key={idx} style={{ marginRight: '0.5rem' }}>
                 {date.toLocaleDateString()}
               </span>
             ))
           ) : (
             <span>暂无选中日期</span>
           )}
         </div>
       </div>
     );
   };
   
   export default MultiDatePicker;
   

进阶自定义配置 #

如果你需要更精细的控制，还可以加上这些实用属性：

• maxDateCount: 限制最多能选择的日期数量，比如maxDateCount={3}就只能选3个日期
• filterDate: 自定义过滤可选择的日期，比如禁用周末：

  filterDate={(date) => {
    const day = date.getDay();
    return day !== 0 && day !== 6; // 排除周日和周六
  }}
  

• inline: 把日历改成内嵌显示的样式，不用点击输入框才弹出
• showYearDropdown: 加上年份下拉选择，方便快速切换年份

这样你就能完全基于react-datepicker实现符合需求的多日期选择功能啦！

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