element-plus 时间选择器7天内

133 阅读1分钟

11.jpg

<el-date-picker 
v-model="rq" 
value-format="YYYY-MM-DD" 
type="daterange" 
range-separator="至"
start-placeholder="选择日期" 
end-placeholder="选择日期" 
style="width:240px;" 
:disabled-date="disabledDate"
@calendar-change="chooseDay = $event[0]" 
@focus="chooseDay = null" />
//设置默认选中当前7let rq = ref<any>()
function sevenDay() {
  const end = new Date()
  const start = new Date()
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  const timestart = proxy.parseTime(start)
  const timeend = proxy.parseTime(end)
  rq.value = [timestart, timeend]
}

/**
 * element-plus 时间选择器7天内
 * 选择的日期 chooseDay
 *  @param {*} time 日期选择器范围控制
 */
const chooseDay = ref(null)
export const disabledDate = (time: Date) => {
  if (chooseDay.value) {// 如何选择了一个日期
    const one = 7 * 24 * 3600 * 1000 // 7天的时间戳
    const minTime = chooseDay.value - one  // 当前日期 - one = 7天之前
    const maxTime = chooseDay.value - 0 + one // 当前日期 + one = 7天之后(必须-0,不然不会变成数字时间戳格式)
    return (
      time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > Date.now()
    )
  } else {
    return time.getTime() > Date.now()  // 如果没有选择日期,就要限制不能选择还没到的日期
  }
}


onMounted(() => {
  sevenDay()
})