核心提示:elementui日期选择:如何设置当天后的日期不能被点击及默认展示日期效果实现p class=block size=smallel-date-pickerv-model=value7type=dat...
elementui日期选择:如何设置当天后的日期不能被点击及默认展示日期效果实现
<p class="block" size="small"> <el-date-picker v-model="value7" type="daterange" align="left" format="yyyy/MM/dd" size="small" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2"> </el-date-picker> </p> 首先你得把这段代码复制到你的html中 然后再导入这段代码 pickerOptions2: { disabledDate(time) { return time.getTime() > Date.now(); 这里就是设置当天后的日期不能被点击 }, shortcuts: [ { text: "最近一周", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]); } }, { text: "最近一个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit("pick", [start, end]); } }, { text: "最近二个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 60); picker.$emit("pick", [start, end]); } } ] }, value6: "", // value7:"" value7: [] };
然后再methods中写一个以下的方法 在created中调用该方法
startTime() { let now = new Date(); let startDate = new Date( Date.UTC(now.getFullYear(), now.getMonth(), now.getDate() - 7) ) .toISOString() .slice(0, 10); let endDate = new Date( Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()) ) .toISOString() .slice(0, 10); this.value7 = []; this.value7.push(startDate); this.value7.push(endDate); },
这样就完成了,这样的效果,网页一打开默认显示当天日期的前七天,如果想要设置更久,在方法中也可以改,相信你可以找到在哪里改的