当我们需要在前端实现日期范围选择功能时，可以使用 date-range-picker_zobor 这个 npm 包。它是一个轻量、易用且可自定义的日期范围选择器。
安装
在项目中使用 npm 安装 date-range-picker_zobor，运行以下命令：
npm install --save date-range-picker_zobor
使用
在需要使用日期范围选择器的页面中，首先引入 date-range-picker_zobor 的 CSS 和 JS 文件：
<link rel="stylesheet" href="node_modules/date-range-picker_zobor/dist/daterangepicker.css"> <script src="node_modules/date-range-picker_zobor/dist/daterangepicker.js"></script>
接着，我们可以在需要加入日期范围选择器的元素上，调用 date-range-picker_zobor 函数：
-- -------------------- ---- -------
------ ----------- -------------- -------- --
--------
------------ -
--------------------------------------
------ ------
-- --------------- ---- ------ -
-------------------------- - -------------------------- - - - - - ------------------------ - - -- - ----- - -----
---
---
---------其中，opens 参数用于指定日期选择器的弹出方向，默认为向下弹出，设为 'left' 则表示向左弹出。
在传入 date-range-picker_zobor 函数的第二个参数中，我们可以获取选择器中当前选中的日期范围，并进行后续操作。
自定义
除了常规使用方式，我们还可以对日期范围选择器进行自定义。下面是一些常用的自定义方式：
自定义选项
我们可以自定义 date-range-picker_zobor 的选项，以改变选择器的外观和行为。例如，通过下面的代码，我们可以将选择器的语言设为中文：
-- -------------------- ---- -------
------------ -
--------------------------------------
------ -------
------- -
------- -------------
---------- - - --
----------- -----
------------ -----
---------- -------
-------- -------
----------------- --------
---------- ----
----------- ----- ---- ---- ---- ---- ---------
----------- ------ ----- ----- ----- ----- -----
----- ----- ----- ----- ------ -------
--------- -
-
-- --------------- ---- ------ -
-------------------------- - -------------------------- - - - - - ------------------------ - - -- - ----- - -----
---
---自定义样式
我们可以自定义 date-range-picker_zobor 的 CSS 样式，以改变选择器的外观。例如，通过下面的样式，我们可以将选择器的背景颜色设为红色：
.daterangepicker {
background-color: red;
}自定义范围
我们可以自定义 date-range-picker_zobor 的可选范围，以限制用户选择的日期。例如，通过下面的代码，我们可以将选择器的可选范围设为“从今天起至未来 30 天”：
-- -------------------- ---- -------
------------ -
--------------------------------------
------ -------
-------- ---------
-------- ---------------- --------
-- --------------- ---- ------ -
-------------------------- - -------------------------- - - - - - ------------------------ - - -- - ----- - -----
---
---示例
下面是一个完整的日期范围选择器示例代码，你可以直接复制到你的项目中使用：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------ ------------
----- ---------------- ---------------------------------------------------------------------
------- ----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------ ----------------
---------------- -
---------- -----
-
--------
-------
------
------ ----------- -------------- -------- --
--------
------------ -
--------------------------------------
------ -------
------- -
------- -------------
---------- - - --
----------- -----
------------ -----
---------- -------
-------- -------
----------------- --------
---------- ----
----------- ----- ---- ---- ---- ---- ---------
----------- ------ ----- ----- ----- ----- -----
----- ----- ----- ----- ------ -------
--------- -
--
-------- ---------
-------- ---------------- --------
-- --------------- ---- ------ -
-------------------------- - -------------------------- - - - - - ------------------------ - - -- - ----- - -----
---
---
---------
-------
-------结语
date-range-picker_zobor 是一个简单易用的日期范围选择器 npm 包，我们可以使用它来实现前端中的日期范围选择功能。除了常规使用方式，我们还可以对选择器进行自定义，以满足实际需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f8b238a385564ab6e18