web技术分享| 日期选择限制组件二次封装
Posted anyRTC
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web技术分享| 日期选择限制组件二次封装相关的知识,希望对你有一定的参考价值。
vue3 + element plus 的项目
项目需求:
开始时间限制:存在某天之前的时间禁选
结束时间限制:当天之后时间禁选
开始时间与结束时间的跨度最大不超过一年
使用 element plus 的 DatePicker 日期选择器
封装结构如下
<el-date-picker
v-model="datePicker.time"
type="daterange"
value-format="X"
:default-time="datePicker.defaultime"
format="YYYY-MM-DD"
size="large"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="timeChange"
:disabled-date="disabledDate"
@calendar-change="calendarChange"
class="date_picker_custom"
/>
vue3 + ts 的 setup 中
startDisabledTime 禁用开始时间(毫秒)
setTimeFn 设置时间,传参可参考 DatePicker 的 v-model 文档
emit(“change”) 事件传递给父组件获取时间区段
const prop = defineProps(
// 禁用开始时间(毫秒)
startDisabledTime:
type: Number,
default: 0,
,
);
const emit = defineEmits(["change"]);
const datePicker = reactive(
time: "" as Date | number | string,
// 记录开始时间(选择区间所需)
startData: null as number | null,
defaultime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
);
// 选中日历日期后会执行的回调!!只选择一个日期就会执行,官网写的不清楚
// 主要用这个方法获取到用户选择的初始时间,然后在禁用方法里通过这个时间设置结束时间的禁用时间
const calendarChange = (dates: any) =>
let hasSelectDate = dates !== null && dates.length > 0;
datePicker.startData = hasSelectDate
? Math.floor(dates[0].getTime() / 1000)
: null;
;
const disabledDate = (time: any) =>
const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
const tempTime = Date.now();
if (datePicker.startData)
const sta = datePicker.startData * 1000 - timeRange * 365;
const minTime = sta < prop.startDisabledTime ? prop.startDisabledTime : sta;
const maxTime = datePicker.startData * 1000 + timeRange * 365;
if (tempTime < maxTime)
return time.getTime() < minTime || time.getTime() > tempTime;
return time.getTime() < minTime || time.getTime() > maxTime;
else
return (
time.getTime() >= tempTime || time.getTime() < prop.startDisabledTime
);
;
const timeChange = (dates: any) =>
let hasSelectDate = dates !== null && dates.length > 0;
datePicker.startData = hasSelectDate ? Number(dates[0]) : null;
emit("change", dates);
;
// 设置日期
const setTimeFn = (time: Date | number | string) =>
datePicker.time = time;
;
// 暴漏方法给父组件
defineExpose( setTimeFn );
以上是关于web技术分享| 日期选择限制组件二次封装的主要内容,如果未能解决你的问题,请参考以下文章
vant组件二次封装 -- vant中使用时间选择器和popup弹出层