之前的文章《为了解决时间问题，我开源了两个库》提到了，我为了处理日常中遇到的时间处理问题，针对性的开源了两个库：时间格式化处理库datex和日历转化（万年历）； 这2个库分别解决了我在开发中遇到的时间处理和日历转换的问题，然而这还不够，我在想还有哪些地方遇到不好解决的时间相关问题呢？
有了！时间选择器！之前的万年历仅仅解决日历的展示问题，真正在产品开发中，更多的场景是如何更方便的选取时间。虽然，市面上并不缺少类似的库，可以说比比皆是。可奈何我喜欢造轮子呢~我需要一个属于自己的前端工具库宇宙。当然了，解决开发中实际遇到的问题同样是目的之一。
我认真盘点了下自己的需求：
- 我需要这样一个时间选择器组件，它只有一个文件，可以同时兼容日期选择、时间选择、日期和时间同时选择，同时它还能选择范围。
- 时间选择器少不了自定义有效选择范围，就是可以在组件中限制你能选择的范围，这样可以减少用户额外的有效值筛选。这个限定可能不是具体的范围，而是重复性的范围，比如具体星期几，周末，工作日，几点到几点。
- 我需要它可以自定义格式，就是value的值可以自己定义，比如：2026-01-01，2026/01/01，2026年01月01日。我不想每次选择完以后，还要手工转化成自己想要的格式。
我从时间格式化库datex中移植来了内部需要用的时间处理方法；又从日历转化库（万年历） 中移植来了日历组件的部分构成；"缝合"成了新的项目 - 日期时间选择器
这个组件库的使用也特别简单，只需引入一个脚本库，加一个标签即可。
html
<!-- 日期和时间 -->
<widget-datetime placeholder="请选择日期和时间" value="2026-01-01" range="[['09:00','18:00']]" limit="['weekday']"></widget-datetime>
<!-- 日期 -->
<widget-date placeholder="请选择日期" value="2026-01-01"></widget-date>
<!-- 时间 -->
<widget-time placeholder="请选择时间" value="09:00" range="[['09:00','18:00']]"></widget-time>
<!-- 日期和时间范围 -->
<widget-datetime-range placeholder="请选择日期和时间" value="" range="[['09:00','18:00']]" limit="['weekday']"></widget-datetime-range>
<!-- 日期范围 -->
<widget-date-range placeholder="请选择日期" value=""></widget-date-range>
<!-- 时间范围 -->
<widget-time-range placeholder="请选择时间" value="" range="[['09:00','18:00']]"></widget-time-range>| 属性 | 参考值 | 说明 |
|---|---|---|
| placeholder | '请选择日期' | 为空时占位提醒 |
| value | '2026-01-01' | 默认值 |
| pattern | 'YYYY年MM月DD日' | 格式化值 YYYY - 年 MM - 月 DD - 日 HH - 小时 mm - 分钟 ss - 秒 |
| range | [['2026-01-01','2026-06-30']] | 限制选择范围 [['2026-01-01','2026-06-30']] - 限制日期 [['09:00','21:00']] - 限制时间 [['2026-01-01',null]] - 单向限制 |
| limit | ['weekend'] | 限制类型 weekend - 周末 weekday - 工作日 sunday/monday/tuesday/wednesday/thursday/friday/saturday - 单向限制 |