vue使用elementUI中日期选择器
需求:默认选中近一个月的,仅能选择今天到三年前的日期,今天以后的日期不可选
<template>
<el-date-picker
v-model="dataValue"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="timestamp"
@change="getTimes"
:picker-options="pickerOptions0"
:clearable="false"
:editable="false"
:default-time="['00:00:00', '23:59:59']"
>
</el-date-picker>
</template>
<script>
export default {
data () {
return {
//默认选择的日期近一个月 11月6日当前的时分秒(比如:现在是12月6日15:23:44,那么11月6日的时分秒也是15:23:44) - 今天12月6日23:59:59
dataValue: [this.getNowTime(new Date() - 86400000 * 30), new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()],
// 使用picker-options规定选择日期区间:今天以及今天三年前的日期
pickerOptions0: {
disabledDate (time) {
//今天的23:59:59
const curDate = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime()
const three = 1080 * 24 * 3600 * 1000
const threeYears = curDate - three
return time.getTime() > curDate || time.getTime() < threeYears
}
}
}
},
//发生改变的时候赋值开始时间与结束时间
getTimes () {
// 开始时间
var startTime = this.dataValue[0]
// 结束时间
var endTime = this.dataValue[1]
//传参给父
this.$emit('getTimes', startTime, endTime)
},
methods: {
//获取当前时间的时分秒
getNowTime (time) {
var now = new Date(time)
var hour = now.getHours()
var minute = now.getMinutes()
var seconds = now.getSeconds()
hour = hour.toString().padStart(2, '0')
minute = minute.toString().padStart(2, '0')
seconds = seconds.toString().padStart(2, '0')
var newDate = Date.parse(`${now}`)
console.log(hour + minute + seconds)
return newDate
}
}
}
</script>