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 });