Vue + Element UI 实现了一个周选择器
如上图,下面贴代码<template><div><el-date-picker size="large"style ="width:120px"v-model="selectYear"format="yyyy 年"value-format="yyyy"type="year":clearable = "false"placeholder="选择年">..
·
如上图,下面贴代码
<template>
<div>
<el-date-picker size="large"
style ="width:120px"
v-model="selectYear"
format="yyyy 年"
value-format="yyyy"
type="year"
:clearable = "false"
placeholder="选择年">
</el-date-picker>
<el-date-picker size="large"
style ="width:120px"
v-model="selectMonth"
format="MM 月"
value-format="MM"
type="month"
:clearable = "false"
placeholder="选择月">
</el-date-picker>
<el-button type="success" @click="setToday">本周</el-button>
<el-button type="info" @click="lastWeek"><<</el-button>
<el-button type="info" @click="nextWeek">>></el-button>
<span>{{weekStart}}</span>
<span>~</span>
<span>{{weekEnd}}</span>
</div>
</template>
<script>
import _ from 'lodash'
export default {
data () {
return {
currentDate: new Date()
}
},
mounted () {
this.currentDate = new Date()
this.setCallback()
},
computed: {
selectYear: {
get: function () {
return this.$moment(this.currentDate).format('YYYY')
},
set: function (newValue) {
let _date = newValue + '-' + this.selectMonth + '-' + '01'
this.currentDate = this.$moment(_date).toDate()
this.setCallback()
}
},
selectMonth: {
get: function () {
return this.$moment(this.currentDate).format('MM')
},
set: function (newValue) {
let _date = this.selectYear + '-' + newValue + '-' + '01'
this.currentDate = this.$moment(_date).toDate()
this.setCallback()
}
},
weekStart () {
return this.getTime(this.currentDate, 0)
},
weekEnd () {
return this.getTime(this.currentDate, -6)
}
},
methods: {
lastWeek () {
this.currentDate = this.$moment(this.currentDate).subtract(7, 'days').toDate()
this.setCallback()
},
nextWeek () {
this.currentDate = this.$moment(this.currentDate).add(7, 'days').toDate()
this.setCallback()
},
setToday () {
this.currentDate = new Date()
this.setCallback()
},
setCallback () {
if (this.weekStart && this.weekEnd) {
// 把开始天和结束天相隔的所有日期天放入一个数组保存
let diffDate = []
let days = this.$moment(this.weekEnd).diff(this.weekStart, 'days')
for (let i = 0; i <= days; i++) {
diffDate.push(this.$moment(this.weekStart).add(i, 'days').format('YYYY-MM-DD'))
}
this.$emit('callback', this.weekStart, this.weekEnd, diffDate)
}
},
// 上周的开始时间
// console.log(getTime(7));
// 上周的结束时间
// console.log(getTime(1));
// 本周的开始时间
// console.log(getTime(0));
// 本周的结束时间
// console.log(getTime(-6));
// 下周的开始时间
// console.log(getTime(-7));
// 下周结束时间
// console.log(getTime(-13));
getTime (selectDate, n) {
let coloneSelectDate = _.cloneDeep(selectDate)
let year = selectDate.getFullYear()
// 因为月份是从0开始的,所以获取这个月的月份数要加1才行
let month = coloneSelectDate.getMonth() + 1
let date = coloneSelectDate.getDate()
let day = coloneSelectDate.getDay()
// 判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
if (day !== 0) {
n = n + (day - 1)
} else {
n = n + day
}
if (day) {
// 这个判断是为了解决跨年的问题,月份是从0开始的
if (month <= 1) {
year = year - 1
month = 12
}
}
coloneSelectDate.setDate(coloneSelectDate.getDate() - n)
year = coloneSelectDate.getFullYear()
month = coloneSelectDate.getMonth() + 1
date = coloneSelectDate.getDate()
let s = year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (date < 10 ? ('0' + date) : date)
return s
}
}
}
</script>
用了一下lodash库的深度拷贝函数,不喜欢自己去掉实现自己的函数也可以,反正我是拿来主义
使用代码
<template>
<week-selector @callback="afterSelectWeek"></week-selector>
<template>
<script>
import WeekSelector from '@/components/WeekSelector.vue'
import _ from 'lodash'
export default {
data () {
return {
innerWeekStart: null,
innerWeekEnd: null,
innerDiffDate: [],
}
},
methods: {
afterSelectWeek (weekStart, weekEnd, diffDate) {
if (weekStart && weekEnd && diffDate) {
this.innerWeekStart = this.$moment(weekStart + ' ' + '00:00:00').toDate()
this.innerWeekEnd = this.$moment(weekEnd + ' ' + '23:59:59').toDate()
this.innerDiffDate = diffDate
}
},
}
}
</script>
选择周以后,通过callback回调函数获得选择周的开始日期,结束日期,以及这一周的每一天(结果放到了diffDate数组里面)
更多推荐
已为社区贡献8条内容
所有评论(0)