什么是 daterangepicker？
daterangepicker 是一个基于 jQuery 和 Moment.js 的日期范围选择插件。它可以让用户轻松地选择一个开始日期和结束日期，并提供丰富的日期格式化、本地化、范围限制等功能。同时，daterangepicker 还支持自定义选项，让开发者可以灵活地根据自己的需求定制日期范围选择的样式和行为。
如何使用 daterangepicker？
安装
daterangepicker 是一个 npm 包，可以通过以下命令安装：
npm install daterangepicker --save
引入
在 HTML 文件中，我们需要引入 jQuery 和 Moment.js，以及 daterangepicker 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/momentjs/2.29.1/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
基本用法
使用 daterangepicker 很简单，只需要在 HTML 中定义一个 input 元素，然后在 JavaScript 中调用 daterangepicker 函数即可。
<input type="text" id="daterange">
$(function() {
$('#daterange').daterangepicker();
});这样，我们就可以在页面上看到一个日期范围选择器了。默认情况下，daterangepicker 显示一个月的日期，并且允许选择任意区间。
选项配置
除了默认的选项外，我们可以通过配置选项来定制日期范围选择器的行为。daterangepicker 支持众多选项，例如：
- startDate、endDate：设置默认选中的开始日期和结束日期；
- minDate、maxDate：设置可选范围的最小日期和最大日期；
- autoApply：设置是否自动应用日期范围；
- locale：设置日期格式化和本地化选项。
下面是一个示例代码：
-- -------------------- ---- -------
------------ -
---------------------------------
---------- -------------------- --------
-------- ---------
-------- -------------
-------- -----------------------
---------- -----
------- -
------- -------------
---------- - - --
----------- -----
------------ -----
---------- ----
----------------- ------
----------- ---------------------
----------- ---------------------
--------- ------------------------------------
-
---
---事件回调
除了选项配置外，daterangepicker 还支持一些事件回调，例如：
- show：日期范围选择器显示时的回调函数；
- hide：日期范围选择器隐藏时的回调函数；
- apply：选择日期范围后的回调函数；
- cancel：取消选择后的回调函数。
下面是一个示例代码：
-- -------------------- ---- -------
------------ -
---------------------------------
---------------- ------
------- -
------- -------------
---------- - - -
-
---
------------------------------------------- ------------ ------- -
------------------------------------------------- - - - - - -------------------------------------
---
-------------------------------------------- ------------ ------- -
----------------
---
---在这个示例中，我们禁用了日期范围选择器自动更新 input 元素的行为，并在 apply 和 cancel 事件回调中分别更新或清空 input 元素的值。
总结
通过本文的介绍，我们了解到了 daterangepicker 的基本用法、选项配置和事件回调，以及如何在项目中使用它。daterangepicker 的强大和灵活性给我们带来了更多的可能性，让我们可以轻松地定制自己的日期范围选择器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/163835