如何在Vue项目的HTML日期输入框中禁止用户选择未来日期

方案1：使用原生日期输入框的max属性（Vue原生实现，无需额外依赖） #

原生<input type="date">支持max属性限制可选的最大日期，我们只需要用Vue动态绑定该属性为今日日期即可实现禁止选择未来日期的效果，是最简单高效的实现方式。

步骤1：修改模板代码 #

给日期输入框加上v-bind:max（简写:max）绑定：

<div class="container text-center justify-content-center container-user">
    <h1 class="text-center">Ciao <span v-model="user_name">{{username}}</span></h1>
    <br>
    <h2 >
        Seleziona la data: [[date.day]] 
    </h2>
    <br>
    <form @submit.prevent="getUpdates">
        <!-- 新增:max绑定到todayMax -->
        <input type="date" v-model="date.day" class="disableFuturedate" :max="todayMax"/>
        <button class="btn btn-primary" type="submit">Seleziona</button>
    </form>
</div>

步骤2：在Vue逻辑中添加今日日期计算 #

选项式API（Vue2/Vue3通用）：

export default {
  data() {
    return {
      username: '',
      date: {
        day: ''
      }
    }
  },
  computed: {
    todayMax() {
      const today = new Date()
      // 格式化得到YYYY-MM-DD格式的日期，符合date输入框的参数要求
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  },
  methods: {
    getUpdates() {
      // 可选：提交时额外加一层校验，防止用户手动修改输入绕过属性限制
      const selectedDate = new Date(this.date.day)
      const today = new Date()
      // 把今天的时分秒设为0，避免当天时间比较出错
      today.setHours(0, 0, 0, 0)
      selectedDate.setHours(0, 0, 0, 0)
      if (selectedDate > today) {
        alert('不能选择未来日期')
        return
      }
      // 后续业务逻辑
    }
  }
}

Vue3组合式API：

import { ref, computed } from 'vue'

const username = ref('')
const date = ref({
  day: ''
})

const todayMax = computed(() => {
  const today = new Date()
  const year = today.getFullYear()
  const month = String(today.getMonth() + 1).padStart(2, '0')
  const day = String(today.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
})

const getUpdates = () => {
  // 校验逻辑和上面一致
  const selectedDate = new Date(date.value.day)
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  selectedDate.setHours(0, 0, 0, 0)
  if (selectedDate > today) {
    alert('不能选择未来日期')
    return
  }
  // 后续业务逻辑
}

方案2：纯JS实现（不依赖Vue特性） #

如果不想用Vue的绑定逻辑，也可以直接在DOM加载完成后给输入框设置max属性：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const dateInput = document.querySelector('.disableFuturedate')
  const today = new Date()
  const year = today.getFullYear()
  const month = String(today.getMonth() + 1).padStart(2, '0')
  const day = String(today.getDate()).padStart(2, '0')
  dateInput.max = `${year}-${month}-${day}`
})

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