项目遇到的问题
一、时间限制
示例:利用element-ui的时间选择器中,禁用某些时间
二、使用步骤
1.引入element UI
2.使用element UI
代码如下(示例):
<template>
<el-date-picker
v-model="timeVal" //双向绑定的值为数组形式
type="daterange"
align="right"
unlink-panels
@change="changeTime" //可以把值拆分成两个
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions" //禁用某些值和其他条件
>
</el-date-picker>
</template>
<style>
export default {
data(){
return {
timeVal:'',
starTime:'',
endTime:'',
pickerOptions: {
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 * 90);
picker.$emit("pick", [start, end]);
},
},
],
//禁用条件
disabledDate(time) {
return time.getTime() < new Date().getTime() || time.getDay() != 1;
},
},
}
},
method:{
changeTime() {
this.startTime = this.timeVal[0];
this.endTime = this.timeVal[1];
},
}
}
</style>
总结
提示:这里对文章进行总结:``提示:这里对文章进行总结:
1.因为本身他获取的是数组形式,所以获取开始/结束时间利用数组的下标就能获取。
2.:picker-options="pickerOptions"中有禁用选项,只用在里面添加你想禁用的条件就好,eg:
禁用周一的,time.getDay() != 1;
禁用今天之前的 time.getTime() < new Date().getTime()