首先在頁面上插入一個(gè)el-date-picker組件并綁定一個(gè)響應(yīng)值

這里我們需要day.js這個(gè)庫來幫助我們處理Date對(duì)象，便于日期的計(jì)算

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //時(shí)間處理

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屬性控制哪些日期需要禁用

該屬性接受一個(gè)函數(shù)函數(shù)的參數(shù)為一個(gè)date對(duì)象代表組件中每一個(gè)可能被選中的日期。

函數(shù)的返回值為一個(gè)布爾值true代表參數(shù)的日期會(huì)被禁用，false代表不會(huì)被禁用。

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //時(shí)間處理

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時(shí)的情況

這里我們指定的禁用的范圍如下：

1. 大于當(dāng)天的日期不可選中
2. 大于或者小于選中日期31天的日期不可選中

要實(shí)現(xiàn)動(dòng)態(tài)限制日期，我們還需要獲取在選擇日期范圍時(shí)第一個(gè)選中的日期，在element-ui中有pickOption的屬性去拿到這個(gè)日期，而在element-plus中，pickOption屬性被取消了，但有一個(gè)事件可以代替它的作用，就是@calendar-change。

該事件接受一個(gè)函數(shù)，函數(shù)的參數(shù)為一個(gè)含有兩個(gè)日期對(duì)象的數(shù)組，選中第一個(gè)日期時(shí)組件會(huì)將該日期對(duì)象放在數(shù)組首位，選中第二個(gè)日期后會(huì)按照時(shí)間順序排列兩個(gè)日期，較前的日期會(huì)在數(shù)組首位，較后的日期會(huì)在次位，選中任一個(gè)日期時(shí)函數(shù)的參數(shù)就會(huì)發(fā)生變化并觸發(fā)該函數(shù)。

因此我們可以定義一個(gè)響應(yīng)值來存儲(chǔ)第一次選中的日期，我們可以先輸出看看該函數(shù)的參數(shù)是否如我們剛剛所說:

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //時(shí)間處理

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>

這樣我們就可以在該函數(shù)觸發(fā)時(shí)將數(shù)組第一位的值賦值給定義的響應(yīng)值，獲取到第一個(gè)選中的日期并存了起來

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //時(shí)間處理

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

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

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

然后我們將三個(gè)指定的禁用范圍的或值作為disable-date的返回值，大于當(dāng)天的日期我們可以直接將兩個(gè)Date對(duì)象進(jìn)行比較，大于或者小于選中日期31天的日期我們使用day.js的subtract和add函數(shù)簡化計(jì)算，具體使用方法可以在day.js的官網(wǎng)查看。這里我們用上了剛剛存下來的第一次選中的日期進(jìn)行比較

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //時(shí)間處理

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] //獲取到第一個(gè)選中的日期
}
</script>

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

查看效果

可以發(fā)現(xiàn)還沒有選中日期時(shí)，前面就有不能選中的日期了，這是因?yàn)槲覀儧]有處理selectedValue為空值的情況，可以在change事件中添加選中第二個(gè)日期后將selectedValue置空的邏輯，然后在disable-date中添加空值判斷的邏輯即可

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'; //時(shí)間處理

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>

此時(shí)我們看到動(dòng)態(tài)禁用就實(shí)現(xiàn)了

視頻教程在這里el-canlendar動(dòng)態(tài)限制選中日期

歡迎關(guān)注B站小南前端の干貨分享文章來源地址http://www.zghlxwxcb.cn/news/detail-776773.html

到了這里，關(guān)于三分鐘教你如何實(shí)現(xiàn)el-date-picker動(dòng)態(tài)限制選中日期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！