element date-picker range类型时间选择器限制选中前后7天的时间的方法

最新推荐文章于 2024-01-27 17:12:37 发布

Felix_10

最新推荐文章于 2024-01-27 17:12:37 发布

阅读量854

点赞数 1

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Felix_10/article/details/124826785

版权

实现效果：
在这里插入图片描述
代码：

<template>
	<el-date-picker
	  v-model="dialogExportOrdersLog.time"
	  type="daterange"
	  range-separator="至"
	  start-placeholder="请选择开始日期"
	  end-placeholder="请选择结束日期"
	  format="YYYY-MM-DD"
	  value-format="YYYY-MM-DD"
	  :editable="false"
	  :disabled-date="disabledDate"
	  @calendar-change="time=>dialogExportOrdersLog.firstSelectTime=time[0]"
	  @visible-change="()=>dialogExportOrdersLog.firstSelectTime = null"
  	/>
</template>
<script setup>
    const disabledDate = time => {
      // 时间选择器设定选择前后7天的方法
      const choiceDateTime = new Date(dialogExportOrdersLog.firstSelectTime).getTime()
      const minTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() - 6)
      const maxTime = new Date(choiceDateTime).setDate(new Date(choiceDateTime).getDate() + 6)
      const min = minTime
      const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 7
      const max = newDate < maxTime ? newDate : maxTime
      // 如果已经选中一个日期 则 返回 该日期前后7天时间可选
      if (dialogExportOrdersLog.firstSelectTime) return time.getTime() < min || time.getTime() > max
      // 若一个日期也没选中 则 返回 当前日期以前日期可选
      return time.getTime() > Date.now()
    }
</script>