vue-daterange-picker是一款vue.js组件，它提供了一种方便且实用的选择日期区间的方式。只需要几行代码，就可以在你的项目中使用这一功能强大的组件。
安装vue-daterange-picker
在你的vue项目中，使用npm命令安装vue-daterange-picker包：
npm install vue-daterange-picker --save
引入vue-daterange-picker
在你的Vue组件中引入vue-daterange-picker。可以通过使用import或者require方式进行引入：
import DateRangePicker from 'vue-daterange-picker'
// 或
const DateRangePicker = require('vue-daterange-picker')在组件中使用vue-daterange-picker：
-- -------------------- ---- -------
----------
-----
------------------
-----------------------
-------------------
---------------------
--
------
-----------
--------
------ --------------- ---- ----------------------
------ ------- -
----------- - --------------- --
---- -- -
------ -
---------- ---
-------- --
-
--
-------- -
----------- ------- -
-------------- - -----------
------------ - ---------
------------------
-
-
-
---------这里我们传入一个起始日期和结束日期的参数，同时监听change事件来获取用户选择的日期。接下来我们深入了解一下这个组件。
vue-daterange-picker的组成部分
vue-daterange-picker由两部分组成：单个日期选择器和日期区间选择器。
单个日期选择器
<date-picker v-model="date" :disabled-date="disabledDate" :placeholder="placeholder" :format="format" :input-class="inputClass" @change="dateChanged" />
vue-daterange-picker中每个日期选择器都是一个Datepicker组件。这个组件接受一些参数来配置它的外观和行为。下面是这些参数：
- v-model：选择的日期值。必填参数；
- placeholder：输入框的提示信息；
- format：日期格式（参考moment.js）；
- input-class：输入框样式；
- disabled-date：用于禁用某些日期选择（参考“禁用日期”部分）；
- change：当用户选择日期或手动输入日期时，触发该事件并返回日期对象。
日期区间选择器
-- -------------------- ---- ------- ------------------ ----------------------- ------------------- ---------------- ----------------------------- -------------------------- ---------------- ------------------------- --------------------- --
日期区间选择器也是一个Vue组件，由上面提到的两个DatePicker组件组成。它也接收一些配置参数：
- start-date：选择的开始日期值。必填参数；
- end-date：选择的结束日期值。必填参数；
- ranges: 预定义的时间段；
- placeholder：输入框的提示信息；
- format：日期格式（参考moment.js）；
- input-class：输入框样式；
- disabled-date：用于禁用某些日期选择（参考“禁用日期”部分）；
- change：当用户选择日期或手动输入日期时，触发该事件并返回日期区间对象。
预定义时间段
vue-daterange-picker支持预定义一些时间段，以快速选择一些常用的时间段（例如“本周”、“上周”、“本月”等），这些时间段由一个数组对象的形式传入：
-- -------------------- ---- -------
------ -
------ -
------- -
-
------ -----
------ - ------ --------- ---- -------- -
--
-
------ -----
------ - ------ -------------------- -------- ---- -------------------- ------- -
--
-
------ -------
------ - ------ -------------------- -------- ---- -------- -
--
-
------ --------
------ - ------ --------------------- -------- ---- -------- -
--
-
------ -----
------ -
------ --------------------------
---- -----------------------
-
--
-
------ ------
------ -
------ -------------------- --------------------------
---- -------------------- -----------------------
-
-
-
-
-在Vue组件中使用预定义时间段：
<date-range-picker :start-date="startDate" :end-date="endDate" :ranges="ranges" @change="dateChanged" />
禁用日期
日期选择器可以通过给：disabled-date属性传入一个返回True或False的函数来禁用某些日期：
data() {
return {
disabledDate: (date) => {
return date.isDisabled;
}
}
}这个函数接收一个moment.js对象（日期对象），并返回一个Boolean值。如果返回True，这个日期将被禁用。
总结
在本文中，我们介绍了vue-daterange-picker的安装和使用，以及如何组合成一个完整的日期区间选择器。我们也学习了如何自定义日期格式、添加预定义时间段和禁用特定的日期。这些技能有助于大家在项目中添加日期功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728381e8991b448e8b85