简介
gm.datepicker-multi-select 是一款基于 jQuery 和 Bootstrap 的多选日期选择器插件。它支持选择多个日期，并且可以设置日期范围以及禁用指定日期。此插件易于使用，可以轻松地在您的项目中集成并使用。
安装
您可以通过使用 npm 包管理器来安装此插件，也可以使用传统的 <script> 标签来引入它。
使用 npm：
npm install gm.datepicker-multi-select
使用直接引用：
<link rel="stylesheet" href="path/to/bootstrap.css"> <link rel="stylesheet" href="path/to/gm.datepicker-multi-select.css"> <script src="path/to/jquery.js"></script> <script src="path/to/bootstrap.js"></script> <script src="path/to/gm.datepicker-multi-select.js"></script>
使用
使用此插件，您需要将一个具有 gm-datepicker-multi-select 类的 <input> 元素初始化为日期选择器。您还可以使用数据属性来自定义选项，如下所示：
<input type="text" class="gm-datepicker-multi-select" data-min-date="2010-01-01" data-max-date="2020-12-31" data-disabled-dates="['2020-02-02', '2020-03-03']">
在您的 JavaScript 代码中，您可以使用以下方法来访问选择的日期：
$('.gm-datepicker-multi-select').datepickerMultiSelect('getSelectedDates');选项
您可以传递选项对象来自定义日期选择器的行为。以下是一些可用选项：
minDate
指定可选择的最小日期。类型为字符串，格式为 yyyy-mm-dd。默认值为 null，表示没有最小日期限制。
maxDate
指定可选择的最大日期。类型为字符串，格式为 yyyy-mm-dd。默认值为 null，表示没有最大日期限制。
disabledDates
指定禁用的日期数组。类型为字符串数组，格式为 yyyy-mm-dd。默认值为 null，表示没有禁用的日期。
onSelect
指定当选择日期时要调用的回调函数。此函数接受两个参数：当前选择的日期数组和日期选择器的输入元素。
onClear
指定当清除选择的日期时要调用的回调函数。此函数接受一个参数：日期选择器的输入元素。
onInit
指定在初始化日期选择器时要调用的回调函数。此函数接受一个参数：日期选择器的输入元素。
formatDate
指定日期格式化函数。此函数接受一个日期对象，返回格式化后的日期字符串。例如：
$('.gm-datepicker-multi-select').datepickerMultiSelect({
formatDate: function(date) {
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
});示例
以下是一个完整的示例，展示了如何在您的项目中使用 gm.datepicker-multi-select 插件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
-----------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------------------------------
-------
------
------ ----------- ---------------------------------- -------------------------- -------------------------- ----------------------------------- ---------------
------- ------------------------------------------------------------
------- ---------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
--------
--------------------------------------------------------
--------- ----------------------- ------ -
------------------------ ---------------
--
-------- --------------- -
------------------------
-
---
---------
-------
-------在上面的示例中，我们初始化具有 gm-datepicker-multi-select 类的 <input> 元素，并传递了 onSelect 和 onClear 回调函数作为选项。在 onSelect 回调函数中，我们将选择的日期打印到控制台中。在 onClear 回调函数中，我们只是简单地打印一条消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e72255dee6beeee7506