Vue + Element UI 实现了一个周选择器
Posted lee576
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="选择年">
</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数组里面)
以上是关于Vue + Element UI 实现了一个周选择器的主要内容,如果未能解决你的问题,请参考以下文章
基于Vue和Element-UI自定义分组以及分组全选Select 选择器
基于Vue和Element-UI自定义分组以及分组全选Select 选择器
vue-element-ui-Cascader 级联选择器支持多选---折腾记