前言
随着时间的推移，前端开发的范畴也在不断地扩大和深入，通过npm包的方式能够轻松地使用各种各样的前端组件和框架，而这些npm包也为我们节省了大量的时间和精力，使我们能够更加专注于实现业务需求。
今天我们要介绍的是一个非常好用的npm包——"vuejs-range-datepickers"，作为一款基于Vue的日期范围选择器，它有很好的交互体验和良好的可定制性，这一款组件能够为我们在实践中提供非常好的帮助。
安装
首先我们需要在终端中进行安装：
npm install vuejs-range-datepickers --save
接下来，我们需要在Vue中将它引入，以使用它。在Vue中的应引入方法如下：
import dateRangePicker from 'vuejs-range-datepickers'
import 'vuejs-range-datepickers/dist/vuejs-range-datepickers.css'
export default {
components: {
dateRangePicker
}
}使用
我们已经完成Vue和npm包的安装和引入工作，现在就可以直接使用了，代码如下：
-- -------------------- ---- -------
----------
-----
---------------------------------------
------
-----------
--------
------ --------------- ---- -------------------------
------ ----------------------------------------------------------
------ ------- -
----------- -
---------------
-
-
---------参数
"vuejs-range-datepickers"提供了一些可供替换的参数，让我们能够根据实际情况进行调整。接下来我会单独详细介绍这些参数。
maximumDateCount（number）
通过这个参数，我们可以控制日期范围选择的天数，参数类型为数字，默认值为"31"，可以根据实际需求进行调整。
<date-range-picker :maximumDateCount="15"></date-range-picker>
minimumDate（moment）
通过这个参数，我们可以控制日期范围选择器中的最小日期，参数类型为"moment"类型，默认值为"N/A"，可以根据实际需求进行调整。
<date-range-picker :minimumDate="new moment().startOf('month')"></date-range-picker>themeColor（string）
通过这个参数，我们可以控制日期范围选择器的主题颜色，参数类型为字符串，默认值为"red"，可以根据实际需求进行调整。
<date-range-picker themeColor="#0077FF"></date-range-picker>
fromLabel（string）
通过这个参数，我们可以控制“起始日期”文本的显示，参数类型为字符串，默认值为"From"，可以根据实际需求进行调整。
<date-range-picker fromLabel="起始日期"></date-range-picker>
toLabel（string）
通过这个参数，我们可以控制“结束日期”文本的显示，参数类型为字符串，默认值为"To"，可以根据实际需求进行调整。
<date-range-picker toLabel="结束日期"></date-range-picker>
format（string）
通过这个参数，我们可以控制日期的显示格式，参数类型为字符串，默认值为"DD/MM/YYYY"，可以根据实际需求进行调整。
<date-range-picker format="YYYY年MM月DD日"></date-range-picker>
demo
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
-----
------------------ ----------------------
----------------- --------------------------
--------------------
----------------
--------------
--------------------
---------------------
------
-----------
--------
------ ------ ---- --------
------ --------------- ---- -------------------------
------ ----------------------------------------------------------
------ ------- -
----------- -
---------------
-
-
---------结尾
这个npm包能够为我们提供非常完整和可定制的日期范围选择工具，功能强大，使用简单。相信它会在各位开发者的开发中提供非常大的帮助，而这篇教程也让大家对它有了非常清晰的了解和认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea781e8991b448dc0d4