React Datella

一个移动端友好的 React 日期范围选择器组件。

✨ 特性

• 移动端优化的交互体验
• 支持日期范围选择
• 自定义月份和星期名称
• 支持禁用未来日期
• 支持默认值设置

安装

npm install react-datella

使用示例

import { DateRangePicker } from 'react-mobile-date-range-picker';
import 'react-mobile-date-range-picker/dist/index.css';

function App() {
  const [visible, setVisible] = useState(false);
  const [dateRange, setDateRange] = useState([null, null]);

  return (
    <DateRangePicker
      visible={visible}
      onClose={() => setVisible(false)}
      onConfirm={(range) => {
        setDateRange(range);
        setVisible(false);
      }}
      defaultValue={dateRange}
    />
  );
}

基本用法

import DateRangePicker from './DateRangePicker';

function App() {
  const [selectedDates, setSelectedDates] = useState([]);
  const [pickerVisible, setPickerVisible] = useState(false);

  return (
    <DateRangePicker
      visible={pickerVisible}
      onClose={() => setPickerVisible(false)}
      onConfirm={(range) => {
        setSelectedDates(range);
        setPickerVisible(false);
      }}
      defaultValue={selectedDates}
      />
  );
}

Props

属性名	类型	默认值	描述
visible	boolean	必填	控制日期选择器的显示/隐藏状态
onClose	function	必填	当点击取消按钮或关闭选择器时触发的回调函数
onConfirm	function	必填	当选择有效日期范围并点击确认按钮时触发的回调函数，参数为排序后的日期数组
defaultValue	Date[]	[]	默认选中的日期范围数组（需包含两个 Date 对象）
monthNames	string[]	['January', 'February', ..., 'December']	自定义月份名称数组（长度必须为12）
weekDays	string[]	['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']	自定义星期缩写数组（长度必须为7）
cancelText	string	'Cancel'	取消按钮显示文本
confirmText	string	'Confirm'	确认按钮显示文本

功能特性

1. 日期范围选择：
   • 支持通过点击选择开始和结束日期
   • 自动按时间顺序排列选择的日期
   • 可视化显示选择范围（中间日期高亮）
2. 交互控制：
   • 未来日期自动禁用（不可选择）
   • 下个月按钮在包含未来日期时自动禁用
   • 确认按钮在选择无效范围时禁用
3. 自定义配置：
   • 支持多语言月份/星期显示
   • 可自定义按钮文案
   • 可通过 CSS 类名自定义样式

注意事项

1. 日期处理：
   • 传入的日期对象会被复制以防止引用问题
   • 当只选择一个日期时，确认按钮保持禁用状态
   • 选择相同开始结束日期时会自动重置
2. 样式依赖：
   • 需要引入配套的 index.scss 样式文件
   • 日期单元格尺寸通过 CSS 控制（默认 40px × 40px）
   • 使用 classNames 管理动态类名
3. 浏览器兼容：
   • 依赖现代浏览器日期对象
   • 使用 ES6+ 语法，建议配合 Babel 使用

回调函数参数说明

onConfirm(range: Date[])

返回按时间排序后的日期数组：

// 示例返回值
[
  new Date('2024-03-01'),  // 开始日期
  new Date('2024-03-15')   // 结束日期
]

onClose()

无参数，仅作为关闭弹窗的触发器

键盘导航支持

• ← → 方向键切换月份（当选择器可见时）
• Enter 键确认选择
• Esc 键关闭选择器

样式类名说明

类名	描述
date-range-picker-overlay	外层遮罩容器
date-range-picker	主容器
header	头部（月份显示+导航按钮）
weekdays	星期行
days	日期网格容器
day	单个日期单元格
other-month	非当前月日期
selected	已选中日期
start-date	范围开始日期
end-date	范围结束日期
in-range	处于选择范围内的日期
disabled	禁用状态日期
footer	底部按钮容器