前言
在移动端开发中，实现一个日期选择器、时间选择器是一件比较常见的事情。而 Weex-Picker 就是一个基于 weex-ui 的日期选择器和时间选择器组件，可用于快速构建日期和时间选择器。
本文主要介绍 Weex-Picker 的使用方法。
安装
使用 Weex-Picker 需要先安装 weex-ui，使用 npm 包管理器进行安装即可。
npm i weex-picker --save
使用
基本使用
在 js 中引入：
import weexPicker from "weex-picker";
日期选择器示例：
-- -------------------- ---- -------
----------
-----
-----
-------------- ------
------------------
--------------
------
-----------
--------
------ ---------- ---- --------------
------ ------- -
-------- -
------------ -
---------------------
------ --- -- ---------- ------------
---- --- -- ---------- ------------
---- --- -- ---------- ------------
-- --- -- -
---------------------- -----
---
--
--
--
---------时间选择器示例：
-- -------------------- ---- -------
----------
-----
-----
-------------- ------
------------------
--------------
------
-----------
--------
------ ---------- ---- --------------
------ ------- -
-------- -
------------ -
---------------------
------ --- -- ---------- -------
---- --- -- ---------- -------
---- --- -- ---------- -------
-- --- -- -
---------------------- -----
---
--
--
--
---------其他 API
- setOptions(options: Object, callback: function)：动态设置 picker 中的可选项。具体说明见下方示例。
- hide()：隐藏 picker，用于选择器点击确认/取消时自动隐藏。
- initIconFont(config: Object)：初始化 iconfont，传入一个对象，其 key 为 iconfont 中 class 名称，value 为 unicode 代码，如：
{ 'down': '\ue602' }。
实例
以下示例展示了动态设置日期、时间选择器选项的方法。
-- -------------------- ---- -------
----------
-----
-----
-------------- ------
------------------
--------------
-----
-------------- ------
----------------------
-----------------
-----
-------------- ------
------------------
--------------
-----
-------------- ------
----------------------
-----------------
------
-----------
--------
------ ---------- ---- --------------
------ ------- -
----- -
------------------ -
------- -
- ----- ------- ------ ------ --
- ----- ------- ------ ------ --
- ----- ------- ------ ------ --
--
--
------------------ -
------- -
- ----- ----- ------ ---- --
- ----- ----- ------ ---- --
- ----- ----- ------ ---- --
--
--
--
-------- -
------------ -
---------------------
------ -------------
-- --- -- -
---------------------- -----
---
--
---------------- -
----------------------
-----------------------
--- -- -
-------------------------- -----
-
--
--
------------ -
---------------------
------ --------
-- --- -- -
---------------------- -----
---
--
---------------- -
----------------------
-----------------------
--- -- -
-------------------------- -----
-
--
--
--
--
---------在 setOptions 方法中，可以动态设置 picker 中的可选项，values 为一个数组，数组中每个元素都包含 text 和 value。
结语
本文介绍了 Weex-Picker 的基本使用方法，并提供了示例代码。通过本文的学习和练习，相信读者已经掌握了使用 Weex-Picker 进行日期和时间选择的技能，并且能够在实际开发中灵活使用 Weex-Picker。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffde05