如今，在前端开发中，日期选择组件是非常常见的需求。针对日期选择组件，市面上已经有很多成熟的 npm 包可以使用。今天，我们来介绍一款能够自定义日期选择范围的 npm 包 —— @evgenycrow/react-date-range-custom。
1. 安装
使用 npm 包管理工具，可以安装 @evgenycrow/react-date-range-custom：
npm install --save @evgenycrow/react-date-range-custom
2. 示例
先来看一下 @evgenycrow/react-date-range-custom 的使用示例。在本篇文章中，我们将使用该包进行一个简单的 demo。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------------- ---- --------------------------------------
-------- ----- -
----- --------------- ----------------- - ---------------
----- ----------------- - ------- -- -
------------------------
--
------ -
-----
---------------
---------------- --------------------------------- --
-------------- -- -
---
--------------------------------------------------------------- - ---------------------------------------------------
----
--
------
--
-
------ ------- ----在 App 组件中，我们定义了一个状态 selectedRange，并使用 useState() 方法初始化为 null。同时，定义了一些处理函数，其中 handleRangeSelect() 函数将被传递给 DateRangeCustom 组件的 onRangeSelect 属性。
当用户选择一个日期范围后，DateRangeCustom 组件将调用 handleRangeSelect() 函数，将选择的范围传递给它。
最后，如果用户选择了一个日期范围，则会渲染一个表示该范围的文本串。
3. 参数
DateRangeCustom 组件提供了丰富的参数，以支持各种自定义需求。
3.1 onRangeSelect
type onRangeSelectCallback = (range: Range) => void;
如果你需要在用户选择日期范围时执行一些特定的逻辑，你可以传递一个处理函数给组件的 onRangeSelect 属性。这个函数会在用户选择日期范围以后被调用，并将选择的范围以参数的形式传递进去。
3.2 initialRange
type initialRange = Range | null;
如果你希望在组件渲染时就拥有一个默认日期范围，你可以传递一个 Range 对象给 initialRange 属性即可。
3.3 minDate 和 maxDate
type minMaxDate = string | number | Date;
如果你需要限制用户选择的日期范围，可以使用 minDate 和 maxDate 属性。
这两个属性均接受 string、number 或 Date 类型的参数，表示限制的日期范围。
3.4 mimimumInterval
type minimumInterval = number;
mimimumInterval 属性表示两个日期之间的最小时间跨度，单位为毫秒。
比如，如果你将 mimimumInterval 设置为 86400000，则表示你不希望用户选择小于一天的时间区间。
3.5 其他属性
DateRangeCustom 组件还提供了许多额外的属性，比如 firstDayOfWeek（表示每周的第一天）、disableMonths（表示禁用的月份）、inline（表示以行内形式渲染）等等。
具体详细的参数请参考官方文档。
4. 总结
@evgenycrow/react-date-range-custom 是一款强大的自定义日期范围选择 npm 包，它提供了广泛的参数以满足自定义需求，并且使用方便简单。在本文中，我们学习了使用该包的基本流程，并且介绍了一些常用属性。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53c79