三分钟教你如何实现el-date-picker动态限制选中日期

首先在页面上插入一个el-date-picker组件并绑定一个响应值

这里我们需要day.js这个库来帮助我们处理Date对象,便于日期的计算

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //时间处理

const dateRange = ref([])
</script>

<template>
  <div class="date-picker">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
    />
  </div>
</template>

<style scoped>
.date-picker {
  width: 100vw;
  height: 90vh;
  display: grid;
  place-content: center;
}
</style>

然后我们使用disable-date属性控制哪些日期需要禁用

该属性接受一个函数函数的参数为一个date对象代表组件中每一个可能被选中的日期。

函数的返回值为一个布尔值true代表参数的日期会被禁用,false代表不会被禁用。

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //时间处理

const dateRange = ref([])

const disableRange = (date: Date) => {
  return false
}
</script>

<template>
  <div class="date-picker">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        :disabled-date="disableRange"
    />
  </div>
</template>

返回值为true时.png

返回值为true时的情况

这里我们指定的禁用的范围如下:

  1. 大于当天的日期不可选中
  2. 大于或者小于选中日期31天的日期不可选中

要实现动态限制日期,我们还需要获取在选择日期范围时第一个选中的日期,在element-ui中有pickOption的属性去拿到这个日期,而在element-plus中,pickOption属性被取消了,但有一个事件可以代替它的作用,就是@calendar-change。

该事件接受一个函数,函数的参数为一个含有两个日期对象的数组,选中第一个日期时组件会将该日期对象放在数组首位,选中第二个日期后会按照时间顺序排列两个日期,较前的日期会在数组首位,较后的日期会在次位,选中任一个日期时函数的参数就会发生变化并触发该函数。

因此我们可以定义一个响应值来存储第一次选中的日期,我们可以先输出看看该函数的参数是否如我们刚刚所说:

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //时间处理

const dateRange = ref([])

const disableRange = (date: Date) => {
  return false
}
const selectDate = (date: Array<Date>) => {
  consoloe.log(date)
}
</script>

<template>
  <div class="date-picker">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        :disabled-date="disableRange"
        @calendar-change="selectDate"
    />
  </div>
</template>

image.png

这样我们就可以在该函数触发时将数组第一位的值赋值给定义的响应值,获取到第一个选中的日期并存了起来

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //时间处理

const dateRange = ref([])
const selectedValue = ref()

const disableRange = (date: Date) => {
  return false
}
const selectDate = (date: Array<Date>) => {
  selectedValue.value = date[0] //获取到第一个选中的日期
}
</script>

<template>
  <div class="date-picker">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        :disabled-date="disableRange"
        @calendar-change="selectDate"
    />
  </div>
</template>

然后我们将三个指定的禁用范围的或值作为disable-date的返回值,大于当天的日期我们可以直接将两个Date对象进行比较,大于或者小于选中日期31天的日期我们使用day.js的subtract和add函数简化计算,具体使用方法可以在day.js的官网查看。这里我们用上了刚刚存下来的第一次选中的日期进行比较

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //时间处理

const dateRange = ref([])
const selectedValue = ref()

const disableRange = (date: Date) => {
  return date > new Date() || dayjs(date) < dayjs(selectedValue.value).subtract(31, 'days')
|| dayjs(date) > dayjs(selectedValue.value).add(31, 'days')

}
const selectDate = (date: Array<Date>) => {
  selectedValue.value = date[0] //获取到第一个选中的日期
}
</script>

<template>
  <div class="date-picker">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        :disabled-date="disableRange"
        @calendar-change="selectDate"
    />
  </div>
</template>

查看效果
image.png

可以发现还没有选中日期时,前面就有不能选中的日期了,这是因为我们没有处理selectedValue为空值的情况,可以在change事件中添加选中第二个日期后将selectedValue置空的逻辑,然后在disable-date中添加空值判断的逻辑即可

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //时间处理

const dateRange = ref([])
const selectedValue = ref()

const disableRange = (date: Date) => {
  //大于今日日期不可选中
  //大于或者小于选中日期31天不可选中
  if(!selectedValue.value)
    return date>new Date()
  return date>new Date() || dayjs(date)<dayjs(selectedValue.value).subtract(31, 'days')
  || dayjs(date)>dayjs(selectedValue.value).add(31, 'days')
}

const selectDate = (date: Array<Date>) => {
  selectedValue.value = date[0]
}
</script>

<template>
  <div class="date-picker">
    <el-date-picker
        v-model="dateRange"
        type="daterange"
        :disabled-date="disableRange"
        @calendar-change="selectDate"
        @change="selectedValue=null"
    />
  </div>
</template>

<style scoped>
.date-picker {
  width: 100vw;
  height: 90vh;
  display: grid;
  place-content: center;
}
</style>

此时我们看到动态禁用就实现了

image.png

视频教程在这里el-canlendar动态限制选中日期

欢迎关注B站小南前端の干货分享

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值