EDateRangePicker（日期跨度选择器）

el-date-picker 简单封装，用于日期跨度选择器相关的画布展示与交互配置。

属性配置

配置	说明
禁用	disabled 参数，默认不开启
只读	readonly 参数，默认不开启
可输入	editable 参数，默认开启
清除按钮	clearable 参数，默认开启
占位文本	start-placeholder 参数，默认“选择开始日期”
占位文本2	end-placeholder 参数，默认“选择结束日期”
分隔符	range-separator 参数，默认 “-”
日期类型	type 参数，支持 datetimerange（日期时间范围）、daterange（日期范围）、monthrange（月份范围）、yearrange（年份范围），默认 daterange
默认值	默认无，通过编辑 JS 函数返回 Date 对象数组 [startDate, endDate]
默认时间值	默认无，通过编辑 JS 函数返回 Date 对象数组 [startDate, endDate]（用于 datetime 类型）
最大跨度	最大可选择的天数跨度
跨度提示	超出最大跨度时的提示文本
输入框格式	format 参数，默认 YYYY-MM-DD
面板日期格式	date-format 参数，默认 YYYY-MM-DD，仅在 type 为 datetime 类型时生效
面板时间格式	time-format 参数，默认 HH:mm:ss，仅在 type 为 datetime 类型时生效
禁用日期	disabled-date 参数，默认无，接受一个 Date 参数，返回 Boolean 值，通过 JS 函数编写
禁用小时	disabled-hours 参数，默认无，返回数组，通过 JS 函数编写，role 参数区分是 start 还是 end
禁用分钟	disabled-minutes 参数，默认无，返回数组，通过 JS 函数编写，role 参数区分是 start 还是 end
禁用秒	disabled-seconds 参数，默认无，返回数组，通过 JS 函数编写，role 参数区分是 start 还是 end
快捷选项	shortcuts 参数，默认无，配置快捷名称与对应的值，需返回数组 [startDate, endDate]
前缀图标	prefix-icon 参数，默认无
清除图标	clear-icon 参数，默认无
大小	size 参数，可选 large / default / small，默认无
自定义样式	默认不开启，开启后可配置字体大小、字体粗细、字体类型、字体样式等

默认值示例

let date = new Date();
let endDate = param?.context?.getStartOfDay(date);
let startDate = param?.context?.addDays(endDate, -7);
return [startDate, endDate];

禁用日期示例

以下示例中，每月仅允许选择 1 日、11 日、21 日：

let date = param.date;
if (!(date instanceof Date) || isNaN(date.getTime())) {
  return true
}
const day = date.getDate();
return day !== 1 && day !== 11 && day !== 21;

禁用小时示例

以下示例中，开始日期面板限制不能选 1、2 时，结束日期面板限制不能选 3、4 时：

if (param.role == 'start') {
  return [1, 2]
} else {
  return [3, 4]
}

快捷选项

通过弹窗配置快捷选项，主要配置显示文本（text）和值（value），其中 value 通过自定义函数返回 Date 对象数组 [startDate, endDate]。

TIP

在自定义函数中，会传入 param 参数以便使用。可以通过 param.context 获取注入的辅助方法，在禁用日期函数中可通过 param.date 获取传入的日期进行判断，在禁用小时，分钟，秒时param.role获取是开始还是结束。

param.context 提供以下日期相关方法：

方法	说明
isDate(date)	判断是否是日期
getDate(_date)	获取日期
formatDate(_date, format)	格式化日期
addHours(date, hours)	增加小时数
addDays(date, days)	增加天数
addMonths(date, months)	增加月数
addYears(date, years)	增加年数
getStartOfDay(date)	获取日初时间
getStartOfMonth(date)	获取月初时间
getStartOfYear(date)	获取年初时间

数据配置

配置	说明
单缓存模式	默认不开启，开启时只需配置“取值缓存”和“存值缓存”
取值缓存	从数据缓存中获取开始日期值
取值缓存2	从数据缓存中获取结束日期值
存值缓存	将开始日期值写入数据缓存
存值缓存2	将结束日期值写入数据缓存
禁用缓存地址	从数据缓存中获取禁用状态，值为 true 时按钮禁用，否则正常

TIP

单缓存模式：开启后，从缓存地址中获取对象，解析对象的 bt、et 值作为开始、结束日期；写入时同样写入 {bt: xxx, et: xxx} 格式的对象，均使用时间戳。

值改变事件

当日期范围选择发生变化时触发值改变事件，可从组件局域参数中获取 selectedValue（开始日期时间戳）和 selectedValue2（结束日期时间戳）。