elementUI中的el-date-picker日期月份时间选择器禁用
1.时间选择器禁用:当开始时间已经选择时,结束时间不能小于开始时间(即禁用结束时间选择器中开始时间前),反之亦然template内容<el-form-item label prop="startTime"><el-date-picker:value-format="valueFormat"clearabletype="datetime"placeholder="开始时间":pic
·
1.时间选择器禁用:当开始时间已经选择时,结束时间不能小于开始时间(即禁用结束时间选择器中开始时间前),反之亦然
template内容
<el-form-item label prop="startTime">
<el-date-picker
:value-format="valueFormat"
clearable
type="datetime"
placeholder="开始时间"
:picker-options="pickerOptionsStart"
v-model="teamInfo.startTime"
style="width: 100%;"
></el-date-picker>
</el-form-item>
<el-form-item label prop="endTime">
<el-date-picker
:value-format="valueFormat"
clearable
type="datetime"
placeholder="结束时间"
v-model="teamInfo.endTime"
:picker-options="pickerOptionsEnd"
style="width: 100%;"
></el-date-picker>
</el-form-item>
script内容
export default {
data(){
return{
teamInfo: {},
valueFormat: "yyyy-MM-dd HH:mm:ss",
pickerOptionsStart: {
disabledDate: time => {
//结束时间已选
if (this.teamInfo.endTime) {
return (
time.getTime() >
new Date(this.teamInfo.endTime - 8.64e7).getTime() //开始时间和结束时间可以选择同一天
//8.64e7 是科学计数法 8.64乘以10的7次方,即为86400000也就是 1000*60*60*24 也就是一天的毫秒数
);
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
//开始时间已选
if (this.teamInfo.startTime) {
return time.getTime() < new Date(this.teamInfo.startTime).getTime();
}
}
},
}
}
2.禁用指定月份
代码:
<template>
<el-date-picker
v-model="listQuery.date"
format="yyyy-MM"
value-format="yyyy-MM"
type="month"
placeholder="选择年月"
:picker-options="pickerOptions">
</el-date-picker>
</template>
export default {
data(){
return{
pickerOptions: {
disabledDate(time) {
// 获取时间选择器的月份信息
const timeyear = time.getFullYear(); // 获取时间选择器的年份
let timemonth = time.getMonth() + 1; // 获取时间选择器的月份
if (timemonth >= 1 && timemonth <= 9) {
timemonth = "0" + timemonth;
}
const elTimeData = timeyear.toString() + timemonth.toString();
//小于指定时间都不可选
return elTimeData < 202110;
},
},
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)