el-datetime-picker-before.vue
<template>
<div>
<el-date-picker
value-format="yyyy-MM-dd"
@change="dateChange"
:size="size"
:picker-options="dateOptions"
v-model="date"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-time-picker
v-if="showTimePicker"
value-format="HH:mm:ss"
@change="timeChange"
:size="size"
:picker-options="timeOptions"
v-model="time"
placeholder="选择时间">
</el-time-picker>
</div>
</template>
<script>
export default {
model: {
prop: 'value',
event: 'updateDateTime'
},
methods: {
dateChange(newDate) {
// 从其他日期切换到今天
if ((newDate === new Date().format('yyyy-MM-dd')) && (this.time > new Date().format("hh:mm:ss"))) {
this.time = '00:00:00'
}
this.updateTimeOptions()
this.$emit('updateDateTime', this.date + ' ' + this.time)
},
timeChange() {
this.$emit('updateDateTime', this.date + ' ' + this.time)
},
updateTimeOptions() {
if (this.date === new Date().format('yyyy-MM-dd')) {
this.$set(this.timeOptions, 'selectableRange', "00:00:00-" + new Date().format("hh:mm:ss"))
} else {
this.$set(this.timeOptions, 'selectableRange', '')
}
this.reloadTimePicker()
},
reloadTimePicker() {
this.showTimePicker = false
this.$nextTick(
() => {
this.showTimePicker = true
}
)
},
},
props: {
value: String,
size: {
type: String,
default: 'mini'
}
},
mounted() {
let dateTime = this.value.split(' ')
this.date = dateTime[0]
this.time = dateTime[1]
this.updateTimeOptions()
},
data() {
return {
showTimePicker: true,
date: '',
time: '',
dateOptions: {
//禁止选择未来的日期，不包含今天。
disabledDate(time) {
return time.getTime() > Date.now()
}
},
timeOptions: {
//禁止选择未来的时间，不包含当前时刻。
selectableRange:
"00:00:00-" + new Date().format("hh:mm:ss")
},
}
}
}
// 为Date原型添加格式化方法
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
}
}
return fmt;
};
</script>
<style scoped>
</style>
使用
<template>
<div style="padding: 20px">
<el-datetime-picker-before v-model="pubTime" />
</div>
</template>
<script>
import elDatetimePickerBefore from './el-datetime-picker-before'
export default {
components:{elDatetimePickerBefore},
data() {
return {
pubTime: "2021-05-24 02:50:44",
}
},
}
</script>
<style scoped>
</style>
