如何让React Date Picker组件显示日历图标？

问题原因 #

showIcon属性仅会为组件添加图标容器，但react-datepicker本身不内置图标资源，只设置showIcon只会让容器占位，导致元素尺寸变大但无图标显示。

解决步骤 #

1. 安装图标依赖
   react-datepicker通常搭配react-icons使用，先安装这个包：

   npm install react-icons
   

2. 修改组件代码
   导入你想要的日历图标（比如Font Awesome的FaCalendar），并通过icon属性传递给DatePicker：

   "use client";
   
   import { useState } from "react";
   import DatePicker from "react-datepicker";
   import { FaCalendar } from "react-icons/fa";
   import "react-datepicker/dist/react-datepicker.css";
   
   
   export default function Form() {
     const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
       null,
       null,
     ]);
     const [startDate, endDate] = dateRange;
   
     return (
       <form>
         <DatePicker
           showIcon
           icon={<FaCalendar />}
           selectsRange={true}
           startDate={startDate}
           endDate={endDate}
           onChange={(update) => {
             console.log("Selected Date Range:", update);
             setDateRange(update);
           }}
           minDate={new Date()}
           withPortal
         />
       </form>
     );
   }
   

3. 可选：自定义图标样式
   如果需要调整图标大小或颜色，直接给图标组件加style属性即可：

   icon={<FaCalendar style={{ fontSize: '16px', color: '#666' }} />}
   

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