element 时间选择器,设置周与周的区间
1. 因为elementui 自带的周选择器,只能选择一个时间点, 所以我input 来装这个时间区间
结构如下:
<div class="time-select">
<co-date-picker
type="week"
v-model="valueTime1"
format="yyyy年 第 WW 周 MM月 dd日"
placeholder="选择周"
@change="changeDate1"
>
</co-date-picker>
<co-input class="input" suffix-icon="el-icon-date" v-model="inputTime1" placeholder="请选择周"></co-input>
</div>
3. 获取当前选中时间点的 周时间和 第几周
getWeek(val) {
let firstDay = new Date(val.getFullYear(), 0, 1)
let dayOfWeek = firstDay.getDay() // 2020-01-01是周三 dayOfWeek==3
let spendDay = 1
if (dayOfWeek != 0) {
spendDay = 7 - dayOfWeek + 1 // 5 离下周一还有5天
}
firstDay = new Date(val.getFullYear(), 0, 1 + spendDay) // 2020-01-06是2020年第一个周一,是2020年第二个周
let d = Math.ceil((val.valueOf() - firstDay.valueOf()) / 86400000) // 当前时间距离2020-01-06有几天
let result = Math.ceil(d / 7) // 换算成周为单位 2020-01-06result是0,但其实是第二个周,所以默认加2
let week = result + 2 //如果使用的是默认为加2(如果将自然周设置为周一到周日则是加1)
return (
this.dataFomat(val.valueOf() - 86400000) +
'~' +
this.dataFomat(val.valueOf() + 5 * 86400000) +
' 第' +
week +
'周 '
)
},
4. 将传入的时间格式化
dataFomat(time) {
const date = new Date(time)
const H = date.getFullYear()
const M = (date.getMonth() + 1).toString().padStart(2, 0)
const D = date.getDate().toString().padStart(2, 0)
return `${H}年${M}月${D}日`
},
5. 然后赋值给input 输入框
changeDate1(val) {
this.valueTime1 = val.getTime()
this.inputTime1 = this.getWeek(val)
},
changeDate2(val) {
this.valueTime2 = val.getTime()
if (this.valueTime2 < this.valueTime1) {
this.$message.error('结束时间不能小于开始时间')
}
this.inputTime2 = this.getWeek(val)
},
6. 当前有个需求是 进入默认选中 最近6周
因为选择时间选择框时每次选中的是周一,那么我 需要拿到当前周一 和 6周前的周一
// 获取每周周一
getMondayDay(time) {
let dd = ''
if (time) {
dd = new Date(time)
} else {
dd = new Date()
}
var week = dd.getDay() // 获取时间的星期数
var minus = week ? week - 1 : 6
dd.setDate(dd.getDate() - minus) // 获取minus天前的日期
var y = dd.getFullYear()
var m = dd.getMonth() + 1 // 获取月份
var d = dd.getDate()
return new Date(y + '-' + m + '-' + d).getTime() / 1000
},
7. 赋值给input 输入框即可
let laseSixWeek = new Date().getTime() - 1000 * 60 * 60 * 24 * 42
// console.log(new Date().getTime(), laseSixWeek)
// console.log(this.getWeek(new Date(+(this.getWeeklyDay(laseSixWeek) + '000'))))
this.valueTime1 = laseSixWeek
this.inputTime1 = this.getWeek(new Date(+(this.getMondayDay(laseSixWeek) + '000'))) // 上6周
this.inputTime2 = this.getWeek(new Date(+(this.getMondayDay() + '000'))) // 当前周
// 获取周的另一种方法
// 获取周
getYearWeek(year, month, date) {
let dateNow = new Date(year, parseInt(month) - 1, date) //当前日期
let dateFirst = new Date(year, 0, 1) //当年第一天
let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000) //当前日期是今年第多少天
return Math.ceil((dataNumber + (dateFirst.getDay() + 1 - 1)) / 7) //dataNumber + 当前年的第一天的周差距的和 在 除以7 就是本年第几周
},
更多推荐
所有评论(0)