123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
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 {
|
|
name: "ElDatetimePickerBefore",
|
|
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>
|