前言
wpy-wx-datepicker 是一个可以在微信小程序中使用的日期时间选择器组件，通过 npm 包的形式发布在开源社区，提供给开发者使用。本文将介绍如何使用这个组件，该组件适用于前端开发的初/中级开发者，有助于优化前端项目的时间选择器功能。
安装
使用 npm 包管理器进行安装，我们可以通过以下命令实现：
npm install wpy-wx-datepicker --save
安装成功后，在项目根目录下的 node_modules 文件夹内会出现 wpy-wx-datepicker 的文件夹，此时我们已经安装成功。
使用
在需要使用时间选择器的页面 wxml 文件中，添加以下代码：
-- -------------------- ---- -------
--------------- ----------------
---------------------------
---------------------------------
---------------------------
---------------------------
-----------------------------------
-----------------------------------
-------------------------------
-------------------------------
---------------------------------
---------------------------------
--------------------------------------
-----------------其中，id、binddatechange 必须指定，其他属性可以按需求添加。
在 js 文件中，我们需要初始化时间选择器：
-- -------------------- ---- -------
------ ------------- ---- -------------------
------
----- -
-------------- ------------- -- ----------
----------- -----------
----------- ----- -- ---------
--------------- ------ -- ------------
--------------- ----- -- --------
------------- ----- -- --------
------------- ----- -- --------
-------------- ----- -- ----------------
-------------- --------- -- ------
---------------- ---------- -- ------
--
------- -------- -- -
--------------- - --- ----------------------------- - -- --------
---------- ------------------------
-------- ----------------------
------- ---------------------
------- ---------------------
--
--
-------- -------- ------ - -- ------
-----------------
--
------ -------- -- - -- ------
--------------------
--
----- -------- -- - -- -------
-------------------
--
----- -------- -- - -- -------
-------------------
--
--参数说明
这里简单解释一下上面几段代码中用到的时间选择器组件的参数：
| 参数 | 类型 | 描述 |
|---|---|---|
| id | string | 用于在页面上标识该时间选择器组件的 id |
| binddatechange | function | 当选择日期/时间后触发该事件，返回一个 Object 格式的数据，包括 date 和 value 两个字段 |
| displayFormat | string | 时间选择后的显示格式 |
| dateFormat | string | 时间选择器内部的日期格式 |
| timePicker | boolean | 是否显示时间选择器 |
| dateTimePicker | boolean | 是否显示日期和时间选择器 |
| showBtnConfirm | boolean | 是否显示确认按钮 |
| showBtnClear | boolean | 是否显示清除按钮 |
| showBtnToday | boolean | 是否显示今天按钮 |
| showDateClear | boolean | 是否仅在有日期数据时显示清除按钮 |
| dateClearIcon | string | 清除按钮的图标 |
| dateConfirmIcon | string | 确认按钮的图标 |
示例代码
如果你想结合实际代码来查看时间选择器的使用效果，可以参考下面的代码实例。
-- -------------------- ---- -------
-----------------
----- ------------------
--------------- ----------------
---------------------------
---------------------------------
---------------------------
---------------------------
-----------------------------------
-----------------------------------
-------------------------------
-------------------------------
---------------------------------
---------------------------------
--------------------------------------
-----------------
------- -----------------------------------------
----- -----------------
------------------------
-------
--------- -------------------- ---- -------
----------
------ ------------- ---- -------------------
------
----- -
--------------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------