element-ui日期选择器禁选日期范围

业务场景

要求多选日期并且可选日期为后端返回的日期，其余日期需要禁选。后端返回一个数组，可选的日期都在这个数组中，除了在这个数组中的日期全部禁用。

实现方法

element-ui的日期选择器组件提供了一个picker-options属性：

在Picker Options中的disabledDate可以用来设置日期的禁用状态，他是一个函数，默认参数为当前的日期（近几年的所有日期）：

disabledDate函数需要返回一个Bollean类型的值，当值为true就把该日期禁选。

我当前是2023年往前是2020年往后至2029年。

拿到日期后，就可以拿这些日期去后端返回的“日期数组”里面去找，如果数组里面没有这个日期就禁选这个日期。

判断一个值是否在数组中可以使用includes或indexOf来进行判断。

注意点

后端传的数组的时间需要与disabledDate参数的日期开始时间一致，否则无法判断。

我这里disabledDate参数的日期的开始时间为00:00:00

new Date('2023-07-11')：生成的日期的开始时间是08:00:00的：

所以我需要将后端返回的日期的时间改为一样的时间，可以通过Date.prototype.setHours() 设置new Date() 生成的日期的时间为00:00:00：Date.prototype.setHours(0)。

具体代码

模板：

<template>
    <el-date-picker type="dates"
        v-model="selectedDates"
        :picker-options="pickerOptions"
        placeholder="选择一个或多个日期"
    </el-date-picker>
</template>

js：

<script>
export default {
    name: 'xxx',
    data () {
        return {
              //   选中的日期
              selectedDates: null,
              //   后端返回的可选的日期
              dates: [],
              //   星期配置加载动画
              weekLoading: false,
              //   日期选择器的选项
              pickerOptions: {
                disabledDate: (date) => {
                  return !this.dates.includes(date.getTime())
                }
              }
        }
    },
    methods: {
        getDates () {
              let serverDates = [
                  '2023-07-11', 
                  '2023-07-12', 
                  '2023-07-13', 
                  '2023-07-14', 
                  '2023-07-15', 
                  '2023-07-16'
              ]
              that.dates = serverDates.map(item => {
                return new Date(item).setHours(0)
              })
        }
    }
}
</script>