【已解决】el-date-picker type=“datetime“限制(动态)可选时间范围，精确到分钟！！！

文章目录

• 实现效果
• code

Vue2 + element ui

实现效果

code

<template>
  <el-date-picker
    ref="datePicker"
    v-model="date"
    type="datetime"
    :picker-options="pickerOptions"
    placeholder="请选择日期时间"
    format="yyyy-MM-dd HH:mm"
    value-format="yyyy-MM-dd HH:mm"
    @change="changeTime"
  >
  </el-date-picker>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      date: '',
      startTime: '2025-11-09 11:10:00',
      endTime: '2025-11-29 18:20:00',
    };
  },

  computed: {
  // 由于 onPick 方法只适用于 datetimerange
  // 所以在此使用 computed的方式来实现；
  // 当每次选中日期，重新计算禁用小时(selectableRange)
    pickerOptions() {
      const selectableRange = this.getSelectableRange(this.date)
      return {
        disabledDate: (date) => {
          const s = new Date(this.startTime).getTime()
          const e = new Date(this.endTime).getTime()
          return date.getTime() < s - 8.64e7 || date.getTime() > e
        },
        selectableRange
      }
    }
  },

  methods: {
    getSelectableRange(date) {
      if (dayjs(date).isSame('2025-11-09 11:00:00',  'day')) {
        return '11:00:00 - 23:59:59'
      }
      if (dayjs(date).isSame('2025-11-29 18:00:00',  'day')) {
        return '00:00:00 - 18:20:00'
      }
      return '00:00:00 - 23:59:59'
    },
    changeTime(date) {
      if (dayjs(date).isBefore(this.startTime, 'minutes')) {
        this.date = this.startTime
      }
      if (dayjs(date).isAfter(this.endTime, 'minutes')) {
        this.date = this.endTime
      }
    }
  },
};
</script>