研发中,大家肯定会遇到活动时间,结束时间大于开始时间,datepicker中type:datetime/datetimerange,可以很方便的实现。但是修改时开始时间不可编辑,结束时间可以编辑的情况下,datetime/datetimerange就很麻烦。
------template-----
<el-form-item label="" prop="startTime">
<el-date-picker
v-model="ruleForm.startTime"
type="datetime"
:picker-options="starttime"
placeholder="开始时间"
/>
</el-form-item>
<span class="marleft_10 marright_10">~</span>
<el-form-item prop="endTime">
<el-date-picker
v-model="ruleForm.endTime"
type="datetime"
:picker-options="endtime"
placeholder="结束时间"
/>
</el-form-item>
-------script-----
----data----
ruleForm:{
startTime: '',
endTime: '',
}
----computed----
// 开始时间小于结束时间
// 结束时间大于开始时间,且大于当前时间
computed: {
starttime() {
let str = "", strtime = '';
let startTimeDate = this.$moment(this.ruleForm.startTime).format("YYYY-MM-DD");
if (this.ruleForm.endTime) {
let endTimeDate = this.$moment(this.ruleForm.endTime).format("YYYY-MM-DD");
if (startTimeDate == endTimeDate) {
str = this.$moment(this.ruleForm.endTime).format("HH:mm:ss");
} else {
str = "23:59:59"
}
strtime = "00:00:00 - " + str
} else {
strtime = "00:00:00 - 23:59:59"
}
return {
disabledDate: (time) => {
if (this.ruleForm.endTime) {
return (
time.getTime() > new Date(this.ruleForm.endTime).getTime() - 8.64e6 // 加- 8.64e6则表示包当天
)
}
// else {
// return time.getTime() < Date.now()- 8.64e7
// }
},
selectableRange: strtime
}
},
// 结束时间
endtime() {
let str = "", strtime = '';
let endTimeDate = this.$moment(this.ruleForm.endTime).format("YYYY-MM-DD");
let nowTimeDate = this.$moment(new Date().getTime()).format("YYYY-MM-DD");
if (this.ruleForm.startTime) {
let startTimeDate = this.$moment(this.ruleForm.startTime).format("YYYY-MM-DD");
if (startTimeDate == endTimeDate) {
if (endTimeDate == nowTimeDate) {
str = this.$moment(new Date().getTime()).format("HH:mm:ss");
} else {
str = this.$moment(this.ruleForm.startTime).format("HH:mm:ss");
}
} else if (nowTimeDate == endTimeDate) {
str = this.$moment(new Date().getTime()).format("HH:mm:ss");
} else {
str = "00:00:00"
}
} else {
if (nowTimeDate == endTimeDate) {
str = this.$moment(new Date().getTime()).format("HH:mm:ss");
} else {
str = "00:00:00"
}
}
strtime = str + " - 23:59:59"
return {
disabledDate: (time) => {
if (this.ruleForm.startTime) {
return (
time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(this.ruleForm.startTime).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
)
} else {
return time.getTime() < Date.now() - 8.64e7
}
},
selectableRange: strtime
}
},
},