element-ui el-date-picker 日期范围的可
2021-03-23 本文已影响0人
老周_o_o
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.1/index.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
</head>
<body>
<div id="test1">
<el-date-picker :picker-options="pickerOptions" value-format="yyyy-MM-dd" size="mini" v-model="timeRange"
type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div>
<script>
class DateFormat {
getDate(value) {
const date = new Date(value)
const year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
return [year, month, day].join('-')
}
getMyDate(day) { // 获取day天前的日期，例如7天内就是 startTime到今天
const todaySec = new Date().getTime()
const startTime = this.getDate(new Date(todaySec - (day - 1) * 24 * 3600 * 1000))
return startTime
}
}
let format = new DateFormat()
new Vue({
el: '#test1',
data: {
timeRange: [],
pickerOptions: {
disabledDate(date) {
// 可选择⽇期的起点: 2019-01-01
// 可选择⽇期的终点: {今⽇⽇期}
const startDate = new Date('2019-01-01 00:00:00') // 要带上时间点，否则默认是8点
const todayDate = new Date()
return date < startDate || date > todayDate
},
shortcuts: [{
text: '今天',
onClick(picker) {
const end = new Date()
const start = new Date()
picker.$emit('pick', [start, end])
}
}, {
text: '昨天',
onClick(picker) {
const end = format.getMyDate(2)
const start = format.getMyDate(2)
picker.$emit('pick', [start, end])
}
}, {
text: '过去7天',
onClick(picker) {
const end = format.getMyDate(1)
const start = format.getMyDate(7)
picker.$emit('pick', [start, end])
}
}, {
text: '过去30天',
onClick(picker) {
const end = format.getMyDate(1)
const start = format.getMyDate(30)
picker.$emit('pick', [start, end])
}
}, {
text: '本周',
onClick(picker) {
const end = format.getMyDate(1)
const day = new Date()
const start = format.getMyDate(day.getDay())
picker.$emit('pick', [start, end])
}
}, {
text: '上周',
onClick(picker) {
const day = new Date()
const end = format.getMyDate(day.getDay() + 1)
const start = format.getMyDate(day.getDay() + 7)
picker.$emit('pick', [start, end])
}
}, {
text: '本月',
onClick(picker) {
const end = format.getMyDate(1)
const day = new Date()
const start = format.getMyDate(day.getDate())
picker.$emit('pick', [start, end])
}
}, {
text: '上月',
onClick(picker) {
const day = new Date()
const end = format.getMyDate(day.getDate() + 1)
const endDate = new Date(end).getDate()
const start = format.getMyDate(day.getDate() + endDate)
picker.$emit('pick', [start, end])
}
}]
}
}
})
</script>
</body>
</html>
