Time Range Picker 24

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

![npm version](https://www.npmjs.com/package/time-range-picker-24)
![License: MIT](https://opensource.org/licenses/MIT)

✨ 特性

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

📦 安装

bash

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 (

    

      

        工作时间:

                  value={formData.timeRange}

          onChange={(val) => setFormData({ ...formData, timeRange: val })}

        />

      

      

    

  );

}

$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

📄 License

MIT © css

🤝 贡献

欢迎提交 Issue 和 Pull Request!

📮 联系方式

- GitHub: your-github
- Email: 1067842416@qq.com