Vue3中如何禁用vuejs-datetimepicker的今日之前日期选择

要实现禁用今日之前的日期，你可以利用组件提供的disabled-date属性，通过自定义判断函数来过滤可选日期：

步骤1：定义禁用日期判断函数 #

在组件的setup函数中，创建一个用于判断日期是否需要禁用的函数，逻辑是如果传入的日期早于今天的起始时间（00:00:00），则禁用该日期：

import { ref } from 'vue'
import Datepicker from 'vue-datepicker-next'
import 'vue-datepicker-next/dist/index.css'

export default {
  components: { Datepicker },
  setup() {
    const date = ref(new Date())

    // 判断日期是否需要禁用
    const isDisabledDate = (targetDate) => {
      const todayStart = new Date()
      todayStart.setHours(0, 0, 0, 0) // 重置为今天的0点0分0秒
      return targetDate < todayStart
    }

    return {
      date,
      isDisabledDate
    }
  }
}

步骤2：绑定到日期选择器组件 #

在模板中给<datepicker>标签添加:disabled-date属性，绑定刚才定义的函数：

<template>
  <div id="app">
    <datepicker v-model="date" :disabled-date="isDisabledDate"></datepicker>
  </div>
</template>

说明 #

• disabled-date是该组件的内置属性，它会对每个可选日期执行传入的判断函数，返回true时该日期会被禁用。
• 重置今天的时间为0点，是为了避免因当前时间（比如下午3点）导致当天上午的时间段被误禁用，确保整个今日都能被选择。

内容的提问来源于stack exchange，提问作者Hoda Kh