526互联

element-plus el-date-picker 实现周选择

发布时间 2023-08-07 11:56:08作者: Cxymds

在使用element-plus的时间选择器的时候，有时候会有选择一周的需求，可以使用以下方式进行实现。
首先使用type=week属性实现基本的样式

 <el-date-picker
    v-model="baseForm.startTime"
    type="week"
    placeholder="选择周"
  >
 </el-date-picker>


接下来修改其值的格式化为某日到某日的格式，需要使用format指定格式

 <el-date-picker
    v-model="baseForm.startTime"
    type="week"
    :format="baseForm.startTime + ' 至 ' + baseForm.endTime"
    placeholder="选择周"
  >
 </el-date-picker>

js代码如下

import dayjs from 'dayjs'
const baseForm = reactive({
  startTime: dayjs().format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD')
}

为el-date-picker添加change事件

<el-date-picker
  v-model="baseForm.startTime"
  type="week"
  :format="baseForm.startTime + ' 至 ' + baseForm.endTime"
  placeholder="选择周"
  @change="changeTime"
>
</el-date-picker>

js函数实现为

// 时间戳转为yy-mm-dd
const getCurrentTime = (data, num) => {
  let date = new Date(data)
  const Y = date.getFullYear()
  const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  const D = date.getDate() + num < 10 ? '0' + (date.getDate() + num) : date.getDate() + num
  date = Y + '-' + M + '-' + D
  return date
}

// 选择周时间的任意一天
const changeTime = val => {
  const date = new Date(val)
  const y = date.getFullYear()
  const m = date.getMonth()
  const d = date.getDate()
  const week = date.getDay()
  const start = new Date(y, m, d - week + 1)
  const end = new Date(y, m, d - week + 7)
  baseForm.startTime = getCurrentTime(start, 0)
  baseForm.endTime = getCurrentTime(end, 0)
}

最终效果见下图