简介
@beisen/ocean-date-picker-composite 是一个基于 React 开发的日期选择器组件。该组件提供了多种日期选择的方式以及可自定义的配置项。由于其简易的使用和强大的扩展性，已经成为很多前端开发者的选择。
安装
使用 npm 安装：
npm install @beisen/ocean-date-picker-composite --save
引入
在需要使用的组件中引入 @beisen/ocean-date-picker-composite：
import DatePickerComposite from '@beisen/ocean-date-picker-composite';
使用
组件提供了多种日期选择的方式，包括日历面板、快捷选择日期段等。同时，也支持多种配置项以方便使用者进行自定制。下面是一个简单的组件使用示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- --------------------------------------
------ ------- -------- ----- -
----- ----------- ------------- - ----------
---------- -----
-------- -----
---
------ -
--------------------
-----------------
-----------------------
------------
-
----- --------
----- -----
--
-
----- ------------
----- -----
--
-
----- ------------
----- ------
--
--
--------------
--
--
-在上述示例中，我们使用了 useState 来声明了一个名为 dateRange 的状态变量。其中，startDate 和 endDate 用于保存选择的日期范围。我们通过传入 value 和 onChange 属性来与状态进行双向绑定。
同时，我们还在组件中传入了 shortcuts 和 locale 两个可选参数。shortcuts 用于配置快捷选择日期段的方式，locale 则用于配置语言环境的，这里我们使用的是简体中文。
自定义配置
@beisen/ocean-date-picker-composite 组件提供了多种可自定义的配置项，以适应不同的业务场景。下面是一个较为完整的自定义配置示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------------- ---- --------------------------------------
------ ----------------------------------------------------
------ ------- -------- ----- -
----- ----------- ------------- - ----------
---------- -----
-------- -----
---
----- ------------ - ------- -- -
--------------
---------- ---------
-------- ---------
---
--
----- ---------------- - -- ------ --- -- -- -
--------------
---------- ------
-------- ----
---
--
------ -
--------------------
-----------------
-----------------------
-----------------------------------
------------
-
----- --------
----- -----
--
-
----- ------------
----- -----
--
-
----- ------------
----- ------
--
--
-------------------
--------------
------------------ ------- ---------- --
----------
--------------
--
--
-在上述示例中，我们通过配置 format 来指定日期格式、通过 showTimePicker 来启用时间选择器、通过 timePickerProps 来配置时间选择器的格式以及通过 allowClear 来启用清除按钮。
同时，我们还传入了 onSelectShortcut 属性来响应快捷日期范围的选择。通过该属性可以自定义快捷日期范围的动作，比如设置为最近一周或一个月等。
总结
本文介绍了如何使用 @beisen/ocean-date-picker-composite 组件，并详细讲解了各种配置参数的作用。通过使用该组件，可以快速、方便地实现日期范围选择功能，为业务开发提供便捷的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/136044