Vue3 Options API：如何正确设置Date-picker的:max以限制未来日期

直接给date类型的input绑定:max="new Date()"不生效，是因为原生input[type="date"]的max属性要求传入**YYYY-MM-DD格式的字符串**，而new Date()返回的是带时区和时间的完整日期对象，转换后不符合格式要求，所以无法限制选择未来日期。

解决步骤如下：

1. 在组件的data中定义存储最大日期的变量：

export default {
  data() {
    return {
      maxDate: ''
    }
  },
  // ...
}

2. 在mounted钩子中格式化今天的日期为YYYY-MM-DD格式，赋值给maxDate：

mounted() {
  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');
  this.maxDate = `${year}-${month}-${day}`;
}

3. 在模板中给date-picker绑定max属性：

<input type="date" :max="maxDate" />

如果你的date-picker是第三方UI组件，部分组件支持直接传入Date对象，但如果遇到不生效的情况，同样可以用上述格式化字符串的方式传入，确保符合组件要求的格式。

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