网络技术分享-日期选择限制组件二次包装

vue3+elementplus项目要求：开始时间限制：某天之前有时间，结束时间限制：该天之后，时间限制的开始时间和结束时间之间的跨度不再超过一年。使用elementplus的DatePicker日期选择器封装结构如下"format="YYYY-MM-DD"size="large"range-separator="to"start-placeholder="开始时间"end-placeholder="结束时间"@change="timeChange":disabled-date="disabledDate"@calendar-change="calendarChange"class="date_picker_custom"/>startDisabledTimeinthesetupofvue3+tsdisablesthestarttime(milliseconds)setTimeFn设置时间，参数传递参考DatePicker的v-model文档emit("change")事件传递给父组件获取时间范围constprop=defineProps({//禁用开始时间（毫秒）startDisabledTime:{type:Number,default:0,},});constemit=defineEmits(["改变"]);constdatePicker=reactive({时间:""asD吃|编号|string,//记录开始时间（选择间隔时需要）startData:nullasnumber|null,defaulttime:[newDate(2000,1,1,0,0,0),newDate(2000,2,1,23,59,59)],});//之后执行的回调日历日期被选中！！只选择一个日期就会执行，官网不清楚//这个方法主要是用来获取用户选择的初始时间，然后在disabled方法中用这个时间设置结束时间的禁用时间constcalendarChange=(dates:any)=>{lethasSelectDate=dates!==null&&dates.length>0;datePicker.startData=hasSelectDate?数学.floor(dates[0].getTime()/1000):null;};constdisabledDate=(time:any)=>{consttimeRange=1*24*60*60*1000;//1天时间戳consttempTime=Date.now();if(datePicker.startData){conststa=datePicker.startData*1000-timeRange*365;constminTime=statempTime;}返回time.getTime()maxTime;}else{return(time.getTime()>=tempTime||time.getTime(){让hasSelectDate=dates!==null&&dates.length>0;datePicker.startData=hasSelectDate?数字（日期[0]）：空；emit("change",dates);};//设置日期constsetTimeFn=(time:Date|number|string)=>{datePicker.time=time;};//将方法暴露给父组件defineExpose({setTimeFn});