如何在React Datepicker中添加自定义Apply/Cancel按钮

要给react-datepicker的年份选择器添加确认与取消按钮，可利用组件提供的customFooter属性自定义底部区域，同时配合临时状态控制日期的确认与重置，具体实现如下：

完整实现代码 #

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

const YearPickerWithButtons = () => {
  // 存储最终确认的日期
  const [startDate, setStartDate] = useState(new Date())
  // 临时存储用户选中的年份，避免未确认就修改正式状态
  const [tempDate, setTempDate] = useState(new Date())

  const handleApply = () => {
    setStartDate(tempDate)
  }

  const handleCancel = () => {
    setTempDate(startDate)
  }

  return (
    <DatePicker
      selected={tempDate}
      className='w-[210px] p-3 text-sm font-[Inter-Regular] outline-none text-black-100 '
      onChange={(date) => {
        setTempDate(date)
      }}
      showYearPicker
      dateFormat='yyyy'
      yearItemNumber={20}
      // 自定义底部按钮栏
      customFooter={() => (
        <div className='flex justify-end gap-2 p-2 border-t'>
          <button 
            onClick={handleCancel}
            className='px-3 py-1 border rounded cursor-pointer'
          >
            Cancel
          </button>
          <button 
            onClick={handleApply}
            className='px-3 py-1 bg-blue-500 text-white rounded cursor-pointer'
          >
            Apply
          </button>
        </div>
      )}
    />
  )
}

export default YearPickerWithButtons

核心要点说明 #

• 新增tempDate临时状态：用于缓存用户选中的年份，避免未点击确认就直接修改正式日期状态
• customFooter属性：通过该属性插入自定义的按钮区域，可根据需求调整布局与样式
• 按钮逻辑：Apply按钮将临时日期同步到正式状态，Cancel按钮重置临时日期为原确认值

内容的提问来源于stack exchange，提问作者Muhammad Farooq Usman