介绍
@beisen-cmps/platform-time-range 是一款基于 React 的时间范围选择组件，提供多种常用的时间选择方式。
通过该组件，用户可快捷选择正确的时间范围，提高工作效率。该组件可在企业内部系统或其他项目中使用。
安装
该 npm 包可以通过以下命令进行安装：
--- ------- --------------------------------
使用
在需要使用该组件的 React 组件中，可以按以下方式引入组件并使用：
------ ------ - -------- - ---- --------
------ --------- ---- -----------------------------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ - ------- -- -
----------------
-
------ -
---------- ----------------------- ------------- --
-
-
------ ------- ----在实际项目中，该组件的使用可能需要进行一些定制和调整，以下介绍一些常用的属性和方法。
属性
value
- 类型：Array
- 默认值：
[] - 说明：当前被选择的时间范围。数组中应包含两个元素，分别为开始时间和结束时间。时间格式为
YYYY-MM-DD HH:mm:ss。
onChange
- 类型：Function
- 默认值：无
- 说明：当用户选择时间范围后，触发该函数。函数参数
value表示用户选择的时间范围。
mode
类型：String
默认值：
all说明：时间选择的模式。有以下四种取值:
all: 选择任意时间范围（默认值）day: 选择某一天的时间范围week: 选择某一周的时间范围month: 选择某一月的时间范围
disabled
- 类型：Boolean
- 默认值：
false - 说明：是否禁用时间选择器。
showAbsoluteTime
- 类型：Boolean
- 默认值：
true - 说明：是否显示绝对时间选项。
showRelativeTime
- 类型：Boolean
- 默认值：
false - 说明：是否显示相对时间选项。
rangeLimit
- 类型：Array
- 默认值：
[] - 说明：限制用户可选择的时间范围。数组中应包含两个元素，分别为最早可选择的时间和最晚可选择的时间。时间格式为
YYYY-MM-DD HH:mm:ss。
方法
setValue
- 参数：
value: Array - 说明：设置当前被选择的时间范围。数组中应包含两个元素，分别为开始时间和结束时间。时间格式为
YYYY-MM-DD HH:mm:ss。
示例
以下代码展示了如何使用 @beisen-cmps/platform-time-range 组件。
该示例展示了组件支持的所有属性和方法，并实现了一些定制化的需求，例如只允许选择最近的三个月，以及为绝对时间选项增加了时间格式说明。
------ ------ - -------- - ---- --------
------ --------- ---- -----------------------------------
-------- ----- -
----- ------- --------- - -------------
----- ------------ -------------- - --------------------------
----- ------------ - ------- -- -
----------------
-
----- ---------------- - ------ -- -
-- ----- --- ------ -
-----------------------------------
- ---- -
-------------------------------
-
-
-------- ------------------ - --- -
----- --- - --- -------
----- --- - --------------------
----- ----- - ---- --- ------- -
------------------ ----------------------- -------------- - -- --- -
---- --- ------ -
------------------ ----------------------- --------------- ------------- - ---- -
------------------ ----------------------- -------------- - -- ----
------ ------- -----
-
-------- -------------------- -
----- ---- - -------------------
----- ----- - ---------------- - ------------------------- -----
----- --- - ------------------------------------- -----
------ ------------------------ ----------
-
------ -
-----
-----
-------------- -- ---- - --------- -- ----
------
-----
-------
------- ------------- -- ----------------------------------
------- -------------------------
------- ------------------------
------- -------------------------
------- --------------------------
---------
------
----------
-------------
-----------------------
----------
----------------
------------------------
----------------
-----------------------
--
-----
----------
----
----------- ---------- -------------
----------- --------------------
----------- --------------------
-----
------
------
-
-
------ ------- ----总结
@beisen-cmps/platform-time-range 为企业内部系统或其他项目中提供了高效、灵活的时间范围选择方案。开发人员可以根据自己的需求定制该组件，并通过文档提供的方法和属性，轻松调整和管理组件的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/beisen-cmps-platform-time-range