<template>
|
<!-- <el-date-picker
|
v-model="value1"
|
type="date"
|
placeholder="选择日期"
|
value-format="yyyy-MM-dd"
|
/> -->
|
<el-date-picker
|
v-model="value1"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
value-format="yyyy-MM-dd HH"
|
end-placeholder="结束日期"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {},
|
props: {
|
// value1: String
|
},
|
data() {
|
// 这里存放数据
|
return {
|
// newValue1: ''
|
value1: '',
|
timeOne: '',
|
pickerOptions: {
|
onPick: ({ maxDate, minDate }) => {
|
// 最大时间 最小时间
|
this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
|
// // 如何你选择了两个日期了，就把那个变量置空
|
if (maxDate) this.timeOne = ''
|
},
|
disabledDate: time => {
|
if (this.timeOne) {
|
const WEEK = 6 * 24 * 3600 * 1000 // 这里乘以6相当于 限制7天以内
|
const minTime = this.timeOne // 七天之前
|
const maxTime = this.timeOne + WEEK // 七天之后
|
return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
|
} else {
|
return time.getTime() > new Date()
|
}
|
}
|
},
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
value1(nv, ov) {
|
// this.newValue1 = nv
|
this.sendPicker()
|
},
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted() {},
|
|
beforeCreate() {}, // 生命周期 - 创建之前
|
beforeMount() {}, // 生命周期 - 挂载之前
|
beforeUpdate() {}, // 生命周期 - 更新之前
|
updated() {}, // 生命周期 - 更新之后
|
beforeDestroy() {}, // 生命周期 - 销毁之前
|
destroyed() {}, // 生命周期 - 销毁完成
|
activated() {},
|
// 方法集合
|
methods: {
|
sendPicker() {
|
this.$emit('sendPickerChild', this.value1)
|
},
|
}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped>
|
</style>
|
