<div class="des-status-df">开始</div>
<div class="block">
<el-date-picker
:picker-options="startDatePicker"
v-model="startTime"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</div>
<div class="des-status-df">结束</div>
<div class="block">
<el-date-picker
:picker-options="endDatePicker"
v-model="endTime"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</div>
beginDate() {
const self = this;
return {
disabledDate(time) {
if (self.endTime) {
//如果结束时间不为空,则小于结束时间
return new Date(self.endTime).getTime() < time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
},
};
},
processDate() {
const self = this;
return {
disabledDate(time) {
if (self.startTime) {
//如果开始时间不为空,则结束时间大于开始时间
return new Date(self.startTime).getTime() > time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
},
};
},
data:
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
版本二: 使用于yyyy-MM-dd HH:mm:ss模式
import Dayjs from 'dayjs'
// :rules="filter_rules({ required: true })" 我司内部写法,可忽略。validator参照饿了么文档写法即可
<el-form-item label="开始时间:" prop="startTime" :rules="filter_rules({ required: true })">
<el-date-picker
v-model="formData.startTime"
type="datetime"
placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
:picker-options="startDatePicker"
style="width: 100%"
/>
</el-form-item>
data() {
const validator = (rule, value, callback) => {
const { startTime, endTime } = this.formData
if (Dayjs(endTime).valueOf() < Dayjs(startTime).valueOf()) {
return callback(new Error('结束时间不能早于开始时间'))
}
callback()
}
return {
formData: {
startTime: '',
endTime: ''
},
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
rules: {
required: true,
validator: validator
}
}
}
// 这里面的方法可提取出来,单独放在utils文件里面做全局使用
beginDate() {
const self = this
return {
disabledDate(time) {
if (self.formData.endTime) {
return self.startTimeControl(time, self.formData)
}
}
}
},
processDate() {
const self = this
return {
disabledDate(time) {
if (self.formData.startTime) {
return self.endTimeControl(time, self.formData)
}
}
}
},
startTimeControl(time, formData) {
const times = this.getDateTime(time)
const { endTime } = formData
const endTimes = this.getDateTime(endTime)
const nowTime = new Date().getTime() - 24 * 60 * 60 * 1000
if (endTime) {
// 结束日期要在选择的开始日期之后,小于开始时间的日期不能选
return times > endTimes || times < nowTime
}
return times < nowTime
},
endTimeControl(time, formData) {
const times = this.getDateTime(time)
const { startTime } = formData
const startTimes = this.getDateTime(startTime)
if (startTime) {
return (
// 结束日期要在选择的开始日期之后,小于开始时间的日期不能选
times < startTimes
)
}
},
getDateTime(time) {
time = this.formatTimeToStr(time, 'yyyy-MM-dd')
return new Date(time?.substr(0, 10)).getTime()
},
formatTimeToStr(times, pattern) {
let d = new Date(times).Format('yyyy-MM-dd HH:mm:ss')
if (pattern) {
d = new Date(times).Format(pattern)
}
return d.toLocaleString()
}
2194

被折叠的 条评论
为什么被折叠?



