如何为type=date的v-text-field设置未来日期限制？

可以直接利用原生HTML日期输入框的max属性实现，因为Vuetify的v-text-field在设置type="date"时，会将原生属性透传给底层的<input>元素，无需额外引入v-date-picker。

实现步骤： #

1. 生成符合格式的日期限制值：原生日期输入框的max属性要求值为YYYY-MM-DD格式的字符串，我们可以通过JavaScript获取当前日期并格式化。
2. 绑定max属性到v-text-field：将格式化后的日期通过:max绑定到组件上。

示例代码： #

首先在组件中添加计算属性获取当前日期：

computed: {
  today() {
    const currentDate = new Date();
    // 转换为YYYY-MM-DD格式
    return currentDate.toISOString().split('T')[0];
  }
}

然后修改你的v-text-field：

<v-text-field
  v-model="start"
  type="date"
  label="Start Date"
  :max="today"
></v-text-field>

额外调整： #

如果需要限制到昨天及之前，只需修改日期计算逻辑：

computed: {
  yesterday() {
    const date = new Date();
    date.setDate(date.getDate() - 1); // 减去一天
    return date.toISOString().split('T')[0];
  }
}

然后将:max="yesterday"绑定到组件即可。

设置后，用户既无法通过日期选择器选择未来日期，手动输入不符合限制的日期也会被浏览器拦截（不同浏览器验证逻辑略有差异，但都会限制非法输入）。

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