A React time range picker component that supports 24:00 (end of day), with no third-party dependencies
npm install time-range-picker-24bash
npm install time-range-picker-24
or
yarn add time-range-picker-24
or
pnpm add time-range-picker-24
`
🔨 使用
$3
`tsx
import React, { useState } from 'react';
import { TimeRangePicker24 } from 'time-range-picker-24';
import 'time-range-picker-24/dist/index.css';
function App() {
const [value, setValue] = useState<[string, string] | null>(null);
return (
value={value}
onChange={setValue}
placeholder={['开始时间', '结束时间']}
/>
{value && (
选择的时间: {value[0]} ~ {value[1]}
)}
);
}
`
$3
`tsx
import React from 'react';
import { TimeRangePicker24 } from 'time-range-picker-24';
function FormExample() {
const [formData, setFormData] = useState({
timeRange: null as [string, string] | null
});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (formData.timeRange) {
console.log('提交的时间范围:', formData.timeRange);
// ['09:00', '24:00']
}
};
return (
);
}
`
$3
`tsx
value={['00:00', '24:00']} // 完整的24小时
onChange={console.log}
/>
`
📝 API
$3
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| value | 时间范围值 | [string, string] \| null | - |
| onChange | 时间变化回调(点击确定后触发) | (value: [string, string] \| null) => void | - |
| style | 自定义样式 | React.CSSProperties | - |
| className | 自定义类名 | string | - |
| placeholder | 占位符 | [string, string] | ['开始时间', '结束时间'] |
| disabled | 是否禁用 | boolean | false |
🎯 交互流程
$3
`
1. 点击开始时间 → 选择时间 → 点击确定
↓
2. 自动打开结束时间弹窗 ✨
↓
3. 选择时间 → 点击确定
↓
4. 完成! 触发onChange
`
$3
支持先选择结束时间,组件会智能引导完成另一半时间的选择。
$3
修改时不会自动跳转,直接触发onChange,不打断用户操作。
💡 24:00 说明
$3
- 24:00 = 当天的最后一刻 = 1440分钟 (不是次日的00:00)
- 时间范围表示为左闭右开区间 [start, end)
$3
`tsx
// 全天营业
['00:00', '24:00'] // 00:00:00 ~ 23:59:59
// 上午到结束
['09:00', '24:00'] // 09:00:00 ~ 23:59:59
// 深夜时段
['22:00', '24:00'] // 22:00:00 ~ 23:59:59
`
$3
`typescript
// 前端传值
{ startTime: '09:00', endTime: '24:00' }
// 后端处理建议
const convertToMinutes = (time: string) => {
if (time === '24:00') return 1440; // 24 * 60
const [h, m] = time.split(':').map(Number);
return h * 60 + m;
};
`
🎨 样式定制
组件使用CSS变量,可以轻松定制主题:
`css
/ 通过覆盖 CSS 变量来定制主题 /
.trp24-time-range-wrapper {
/ 主题色 /
--trp24-primary-color: #1890ff;
--trp24-primary-color-hover: #40a9ff;
--trp24-primary-color-active: #096dd9;
--trp24-primary-color-light: #e6f7ff;
--trp24-primary-color-shadow: rgba(24, 144, 255, 0.2);
/ 边框 /
--trp24-border-color: #d9d9d9;
--trp24-border-color-split: #f0f0f0;
--trp24-border-radius: 2px;
/ 文字颜色 /
--trp24-text-color: rgba(0, 0, 0, 0.85);
--trp24-text-color-secondary: rgba(0, 0, 0, 0.45);
--trp24-text-color-disabled: rgba(0, 0, 0, 0.25);
/ 背景色 /
--trp24-bg-color: #fff;
--trp24-bg-color-disabled: #f5f5f5;
--trp24-bg-color-hover: #f5f5f5;
--trp24-bg-color-header: #fafafa;
/ 错误提示 /
--trp24-error-color: #ff4d4f;
--trp24-error-bg: #fff2f0;
--trp24-error-border: #ffccc7;
/ 字体 /
--trp24-font-size: 14px;
--trp24-font-size-sm: 12px;
}
`
$3
`css
.trp24-time-range-wrapper {
--trp24-primary-color: #722ed1;
--trp24-primary-color-hover: #9254de;
--trp24-primary-color-active: #531dab;
--trp24-primary-color-light: #f9f0ff;
--trp24-primary-color-shadow: rgba(114, 46, 209, 0.2);
}
`
$3
`css
.trp24-time-range-wrapper {
--trp24-border-color: #434343;
--trp24-border-color-split: #303030;
--trp24-text-color: rgba(255, 255, 255, 0.85);
--trp24-text-color-secondary: rgba(255, 255, 255, 0.45);
--trp24-text-color-disabled: rgba(255, 255, 255, 0.25);
--trp24-bg-color: #141414;
--trp24-bg-color-disabled: #262626;
--trp24-bg-color-hover: #262626;
--trp24-bg-color-header: #1f1f1f;
}
`
或者直接覆盖具体样式:
`css
.trp24-time-input-group {
border-radius: 8px;
}
.trp24-btn-confirm {
border-radius: 4px;
height: 28px;
}
`
📋 注意事项
1. 时间范围: 开始时间不能晚于结束时间
2. 完整值触发: 只有两个时间都选择完才会触发onChange
3. 24:00限制: 24小时只能选00分钟,自动禁用01-59分钟
4. Form集成: 完全兼容各种表单库的required校验
🔧 开发
`bash
安装依赖
npm install
构建
npm run build
发布
npm publish
``