element-plus时间选择范围限制

小鱼儿心语：在草原上，做什么事都别做绝，兔子急了还咬狼呢，母狼急了能不拼命吗?不只是草原，任何时候任何地点，做任何事情，都不能把事情做得很绝，因为没人知道未来会发生什么，我们常说“凡事留一线，日后好相见”说的就是这个道理。世事难料，也许这一次的帮忙，会是你未来人生转折的重要助力呢。

一、当天及后七天的日期

当天及七天后.png

<template>
  <div class="app-container">
    <el-date-picker clearable
      v-model="form.examDate"
      type="date"
      value-format="YYYY-MM-DD"
      placeholder="请选择检查日期"
      :disabled-date="disabledDateFun"
      style="width: 340px;"
      :disabled="islook">
    </el-date-picker>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const { proxy } = getCurrentInstance();
  const disabledDateFun = (time) => {
    const date1 = new Date()
    const date2 = new Date(date1);
    date2.setDate(date1.getDate()+6);  
    if (time.getTime()<= new Date().getTime()-8.64e7||time.getTime()>date2.getTime()) {
      return time.getTime()<= new Date().getTime()-8.64e7||time.getTime()>date2.getTime(); //时间范围必须是时间戳
    } else {
      return time.getTime() < Date.now() - 30 * 8.64e7||time.getTime()>date2.getTime(); //8.64e7就是一天的时间戳 24*60*60*1000 
    }
  }
</script>

二、近30天日期

近30天日期.png

<template>
  <div class="demo-date-picker">
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        :disabled-date="disabledDateFun"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref('')

const disabledDateFun = (time) => {
  if (time.getTime() > new Date().getTime()) {
    return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
  } else {
    return time.getTime() < Date.now() - 30 * 8.64e7; //8.64e7就是一天的时间戳 24*60*60*1000 
  }
}

</script>

三、当前月份及之前的月份的日期

当前月份及之前的月份.png

<template>
  <div class="app-container">
    <el-date-picker 
      v-model="queryParams.yMonth" 
      type="month" 
      format="YYYY-MM" 
      value-format="YYYY-MM" 
      @change="handleQuery" 
      :disabled-date="disabledDateFun"/>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const { proxy } = getCurrentInstance();
  const disabledDateFun = (time) => {
    if (time.getTime()> new Date().getTime()) {
      return time.getTime()> new Date().getTime(); //时间范围必须是时间戳
    }
  }
</script>

四、当前月份及之前的12个月份的日期--添加开始月份默认为当月的前12个月（例如2022-12），结束月份为当前月份（例如2023-11）

当前月份及之前的12个月份.png

<template>
  <div class="app-container">
    <el-date-picker
       v-model="queryParams1.date"
       type="monthrange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       @change="changetime"
     />
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const { proxy } = getCurrentInstance();
  const data = reactive({
    queryParams1:{
      date:[]
    }
  });
  const {queryParams1 } = toRefs(data);
  onMounted(() => {
    gettime()
  })
  function gettime(){
    //获取新的时间(2019.4.12）
    let date = new Date()
    //获取当前时间的年份转为字符串
    let endYear = date.getFullYear().toString()   //'2019'
    let staYear = endYear
    //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
    let staMonth = 0
    let endMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'04'
    if(date.getMonth()+1 == 12){
        staYear = (date.getFullYear()).toString()
        staMonth = (1).toString()
        staMonth = staMonth < 10 ? '0'+staMonth:staMonth
    }else {
        // staMonth = date.getMonth() < 10 ? '0'+(date.getMonth()).toString():(date.getMonth()).toString()  //'04'
        staYear = (date.getFullYear()-1).toString()
        staMonth = ((date.getMonth()+1)+1).toString()
        staMonth = staMonth < 10 ? '0'+staMonth:staMonth
    }
    //字符串拼接，开始时间，结束时间
    let end = endYear + '-' + endMonth   //当月2019-04 
    let beg = staYear + '-' + staMonth    //当月减3 2019-01
    queryParams.value.EDate=end
    queryParams.value.SDate=beg //将值设置给插件绑定的数据
    queryParams1.value.date.push(beg,end)
  }
</script>

五、可选范围为：指定的某一天开始到---两个月后的日期

<template>
  <div class="app-container">
    <el-date-picker
       v-model="form.fshz"
       type="date"
       placeholder="请选择复审换证日期"
       :picker-options="pickerOptions"
       style="width:30%">
    </el-date-picker>
 </div>
</template>

<script>
export default {
    data() {
      const startime = this.$route.query.start    // 为某天的日期
        return {
            pickerOptions: {
                disabledDate(time) {
                    if(time){
                        const date1 = new Date(startime.slice(0,10))    // YYYY-MM-DD
                        const date2 = new Date(date1);
                        date2.setDate(date1.getDate()+60);              // 60天两个月内
                        if (time.getTime()<= new Date(startime.slice(0,10)).getTime()-8.64e7||time.getTime()>date2.getTime()) {
                            return time.getTime()<= new Date(startime.slice(0,10)).getTime()-8.64e7||time.getTime()>date2.getTime(); //时间范围必须是时间戳
                        } else {
                            return time.getTime() < Date.now(startime.slice(0,10)) - 30 * 8.64e7||time.getTime()>date2.getTime(); //8.64e7就是一天的时间戳 24*60*60*1000 
                        }
                    }
                },
            },
        }
    }
</script>

六、日期格式转换

formatDate(time) {
      // const date = new Date() //   Wed Aug 26 2020 11:14:44 GMT+0800 (中国标准时间)
      const date = new Date(time)
      // 设置时间转换格式
      var y = date.getFullYear() // 获取年
      var m = date.getMonth() + 1 // 获取月
      m = m < 10 ? '0' + m : m // 判断月是否大于10
      var d = date.getDate() // 获取日
      d = d < 10 ? '0' + d : d // 判断日期是否大10
      let h = date.getHours() // 11
      h = h < 10 ? '0' + h : h // 判断日期是否大10
      let mm = date.getMinutes() // 14
      mm = mm < 10 ? '0' + mm : mm // 判断日期是否大10
      let s = date.getSeconds() // 44
      s = s < 10 ? '0' + s : s // 判断日期是否大10
      return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s // 返回时间格式
}

七、指定的某一天往后的第15天的日期

var strdate = new Date(this.startime);     // this.startime为某一天的日期
var begindate = strdate.getTime();
var enddate = begindate + (15*24*60*60*1000);
var str = this.getTimeNow(enddate)         // 第15天的日期
this.form.fshz = str