前端开发过程中，日期选择组件是非常常见的需求，然而手写一个稳定、优雅、全面的日期选择组件是非常有难度的。好在有 npm 生态提供的各种优秀组件库，使得开发者可以快速地集成到自己的项目中。本文介绍的是一个基于 wepy 框架的时间区间选择器组件——wepy-calendar-range，可以帮助使用 wepy 的开发者快速构建出优秀的时间区间选择组件，以及基于代码注解对该组件进行更灵活的修改。
wepy-calendar-range 的安装
我们通过 npm 安装 wepy-calendar-range 组件，命令如下：
npm install --save wepy-calendar-range
然后在 .wepy.js 中引入组件：
import CalendarRange from 'wepy-calendar-range';
export default {
components: {
CalendarRange
}
};wepy-calendar-range 的使用
调用 wepy-calendar-range 组件，将组件放到页面中，并传入相应的配置属性即可。组件的常用配置属性如下：
| 属性 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
visible |
Boolean | false |
是否显示组件 |
active |
Boolean | false |
是否激活选择器 |
startDate |
Date | new Date() |
选择器上一面板显示的时间的第一天，第一次加载组件时自动设置并触发事件 |
endDate |
Date | new Date() |
选择器上一面板显示的时间的最后一天，第一次加载组件时自动设置并触发事件 |
showPastDays |
Boolean | true |
是否显示过去的日期 |
disabledDays |
Array | [] |
不能选择的日期数组，里面存放需要禁用的日期的字符串，格式为：yyyy-mm-dd |
themeColor |
String | #4abf87 |
选择器主题颜色 |
confirmText |
String | 确定 |
确定按钮文本 |
cancelText |
String | 取消 |
取消按钮文本 |
format |
String | yyyy-mm-dd |
所选时间的格式，比如：yyyy-mm-dd hh:ii:ss |
下面是 wepy-calendar-range 组件的使用示例：
-- -------------------- ---- -------
----------
--------------
-------------------
---------------------------
-------------------------
--
-----------
--------
------ ------------- ---- ----------------------
------ ------- -
----------- -
-------------
--
-------- -
--------------- ----------- -------- -
---------------------- ------------ - -------------
--
-------------- -- -
----------------------
-
-
-
---------组件加载后，会默认打开 wepy-calendar-range 表示选择器面板，如下图所示：
可以在选择器面板上选择起始时间和结束时间，点击按钮确认选择后，会有两个时间参数返回给监听函数 v-confirm，然后就可以对选择的时间进行业务逻辑操作。如果点击取消按钮，则执行 v-cancel 监听函数。
wepy-calendar-range 组件的修改
wepy-calendar-range 组件内部是采用原生小程序的原型方式构建的，所以在一些特定情况下可能不能满足开发者的某些特定需求。这时，需要对组件进行一些修改。接下来我们基于组件的注释，对 wepy-calendar-range 组件做一些灵活修改。
1. 注释精进
对于组件内部的处理逻辑，可以逐个方法逐个注释阅读，获得更精细的注释精卓，更快速、能够更有效地定位到自己需要修改的地方，减少无效修改的的可能性。
2. 修改样式
涉及到样式的修改都应该在组件的 .wpy 文件中进行。通过样式的修改，可以轻松实现修改组件的外观，更贴近自己的需求。
3. 属性覆盖
wepy-calendar-range 组件采用了一些简单的属性定义方式，有些值是写为固定的默认值，但这些默认值不一定能够满足开发者的需求。这时，我们就可以通过传入覆盖属性，修改组件内部的属性配置，以满足我们自己的需求。
代码示例：
-- -------------------- ---- -------
----------
--------------
-----------------------
----------------------------
-------------------------
--------------------------------
------------------------------
---------------------
--
-----------
--------
------ ------------- ---- ----------------------
------ ------- -
----------- -
-------------
--
---- -- -
------ -
----------- ----------
------------ -------------
----------------- -----
---------------- ------
------------ -------------- -------------
--
-
--
---------4. 方法覆盖
wepy-calendar-range 组件的方法都有比较详细的注释说明，我们可以参考注释注解修改方法。如若遇到一些特殊用途的需求，我们就可以自行扩展相应方法和修改对应处理逻辑。通过这种方式，可以增加组件的可扩展性，更好满足自己特殊需求。
代码示例：
-- -------------------- ---- -------
----------
--------------
-----------------------
------------------------
--
-----------
--------
------ ------------- ---- ----------------------
------ ------- -
----------- -
-------------
--
-------- -
----------- ------ ------ ---- -
----------------- ------ ----- -- ----------
-
-
--
---------总结
通过本文的介绍，我们可以发现，使用 wepy-calendar-range 组件可以大大节省我们开发的时间，降低我们开发的难度。在修改组件内部的属性或者方法时，一定要结合组件内部的注释操作，将自己修改的代码变得更加灵活，好阅读。现在，你可以移步 github 上搜索 wepy-calendar-range 组件，自己尝试使用、维护和修改啦!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0d8