Time Range Picker 24

一个支持选择24:00(当天结束时刻)的React时间范围选择器组件,无第三方UI库依赖,完全原生实现。

✨ 特性

• ✅ 支持选择 00:00 - 24:00 的完整时间范围
• ✅ 24:00 表示当天的最后一刻 (不是次日00:00)
• ✅ 自动限制:选择24小时时,分钟只能选00
• ✅ 确认后赋值:只有点击确定按钮后才更新Input值
• ✅ 智能焦点切换:选择完一个时间自动跳转到另一个时间
• ✅ 完整值触发:只有两个时间都选择完才触发onChange
• ✅ 实时校验提示,弹窗内显示错误信息
• ✅ 支持回显、自动滚动到已选时间
• ✅ 无第三方UI库依赖,完全原生实现
• ✅ 轻量级,打包后仅约10KB (gzip)
• ✅ TypeScript支持

📦 安装

npm install time-range-picker-24
# or
yarn add time-range-picker-24
# or
pnpm add time-range-picker-24

🔨 使用

基础用法

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 (
    <div>
      <TimeRangePicker24
        value={value}
        onChange={setValue}
        placeholder={['开始时间', '结束时间']}
      />
      
      {value && (
        <div>选择的时间: {value[0]} ~ {value[1]}</div>
      )}
    </div>
  );
}

与Form集成

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 (
    <form onSubmit={handleSubmit}>
      <label>
        工作时间:
        <TimeRangePicker24
          value={formData.timeRange}
          onChange={(val) => setFormData({ ...formData, timeRange: val })}
        />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

完整24小时

<TimeRangePicker24
  value={['00:00', '24:00']}  // 完整的24小时
  onChange={console.log}
/>

📝 API

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | value | 时间范围值 | [string, string] \| null | - | | onChange | 时间变化回调(点击确定后触发) | (value: [string, string] \| null) => void | - | | style | 自定义样式 | React.CSSProperties | - | | className | 自定义类名 | string | - | | placeholder | 占位符 | [string, string] | ['开始时间', '结束时间'] | | disabled | 是否禁用 | boolean | false |

🎯 交互流程

1. 首次选择(推荐流程)

1. 点击开始时间 → 选择时间 → 点击确定
   ↓
2. 自动打开结束时间弹窗 ✨
   ↓
3. 选择时间 → 点击确定
   ↓
4. 完成! 触发onChange

2. 灵活顺序

支持先选择结束时间,组件会智能引导完成另一半时间的选择。

3. 修改已有时间

修改时不会自动跳转,直接触发onChange,不打断用户操作。

💡 24:00 说明

时间概念

• 24:00 = 当天的最后一刻 = 1440分钟 (不是次日的00:00)
• 时间范围表示为左闭右开区间 [start, end)

使用场景

// 全天营业
['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

后端对接

// 前端传值
{ 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 变量来定制主题 */
.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;
}

示例：紫色主题

.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);
}

示例：深色主题

.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;
}

或者直接覆盖具体样式:

.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校验

🔧 开发

# 安装依赖
npm install

# 构建
npm run build

# 发布
npm publish

📄 License

MIT © css

🤝 贡献

欢迎提交 Issue 和 Pull Request!

📮 联系方式

• GitHub: your-github
• Email: [email protected]