本文介绍了如何使用ElementUI的时间选择器组件设置不同限制条件，包括选择今天及之后、今天及之前、不选当天、选取三个月内等日期范围，并解决在两个日期时间输入框中确保结束日期不能早于开始日期的问题，以及处理因缺少时分秒导致的错误。
单个日期时间输入框
组件代码：
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0">
情景1: 设置选择今天以及今天之后的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
情景2: 设置选择今天以及今天以前的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
情景3: 设置选择今天之后的日期(不能选择当天时间)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
情景4: 设置选择今天之前的日期(不能选择当天)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
情景5: 设置选择三个月之前到今天的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 90 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}
两个日期时间输入框
组件代码：
v-model="value1"
type="date"
placeholder="开始日期"
:picker-options="pickerOptions0">
v-model="value2"
type="date"
placeholder="结束日期"
:picker-options="pickerOptions1">
情景1: 限制结束日期不能大于开始日期
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}
如果报错：date.getHours is not a function 赋值上去的没有时分秒，加上就好了。(HH:mm:ss：)
扫一扫
4656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
