之前的文章《为了解决时间问题，我开源了两个库》提到了，我为了处理日常中遇到的时间处理问题，针对性的开源了两个库：时间格式化处理库datex和日历转化（万年历）； 这2个库分别解决了我在开发中遇到的时间处理和日历转换的问题，然而这还不够，我在想还有哪些地方遇到不好解决的时间相关问题呢？

有了！时间选择器！之前的万年历仅仅解决日历的展示问题，真正在产品开发中，更多的场景是如何更方便的选取时间。虽然，市面上并不缺少类似的库，可以说比比皆是。可奈何我喜欢造轮子呢~我需要一个属于自己的前端工具库宇宙。当然了，解决开发中实际遇到的问题同样是目的之一。

我认真盘点了下自己的需求：

1. 我需要这样一个时间选择器组件，它只有一个文件，可以同时兼容日期选择、时间选择、日期和时间同时选择，同时它还能选择范围。
2. 时间选择器少不了自定义有效选择范围，就是可以在组件中限制你能选择的范围，这样可以减少用户额外的有效值筛选。这个限定可能不是具体的范围，而是重复性的范围，比如具体星期几，周末，工作日，几点到几点。
3. 我需要它可以自定义格式，就是value的值可以自己定义，比如：2026-01-01，2026/01/01，2026年01月01日。我不想每次选择完以后，还要手工转化成自己想要的格式。

我从时间格式化库datex中移植来了内部需要用的时间处理方法；又从日历转化库（万年历） 中移植来了日历组件的部分构成；“缝合”成了新的项目 - 日期时间选择器

这个组件库的使用也特别简单，只需引入一个脚本库，加一个标签即可。

<!-- 日期和时间 -->
<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>