Vue日期选择器Safari拦截失效及Firefox手动输入无法阻止问题求助

问题1：Safari中<input type="date">的:min属性拦截失效 #

原因 #

Safari对input[type="date"]的min属性存在UTC时区兼容性问题。原代码用toISOString()生成日期字符串，该方法返回UTC时间对应的日期，而Safari会基于本地时间解析min值。当本地时区与UTC存在时差（如东八区）时，UTC的“明天”可能对应本地的“今天”，导致Safari识别的最小日期不符合预期，所有日期都处于可选状态。

解决方案 #

放弃toISOString()，基于本地时间手动构造YYYY-MM-DD格式的日期字符串，确保minDate和初始选中日期与本地时区一致：

修改Vue代码如下：

const app = new Vue({
  el: "#app",
  data() {
    const getLocalTomorrow = () => {
      const date = new Date();
      date.setDate(date.getDate() + 1);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    
    return {
      selectedDate: getLocalTomorrow()
    };
  },
  computed: {
    minDate() {
      const date = new Date();
      date.setDate(date.getDate() + 1);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
});

问题2：Firefox中阻止手动输入的逻辑失效 #

原因 #

Firefox的input[type="date"]原生控件对键盘事件的处理逻辑与Chrome不同，直接用onkeydown="return false;"无法有效阻止手动输入，数字键、粘贴操作等仍能触发输入行为。

解决方案 #

使用Vue事件绑定，结合preventDefault()阻止默认输入，同时保留必要的导航按键（如Tab、方向键），并处理粘贴操作：

1. 更新HTML中的input标签：

<input type="date" v-model="selectedDate" :min="minDate" @keydown="handleKeydown" @paste.prevent />

2. 在Vue实例中添加事件处理方法：

const app = new Vue({
  el: "#app",
  // 保留之前的data、computed代码
  methods: {
    handleKeydown(e) {
      // 允许Tab、方向键用于日期选择器导航，其他按键阻止输入
      const allowedKeys = ['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
      if (!allowedKeys.includes(e.key)) {
        e.preventDefault();
        e.stopPropagation();
      }
    }
  }
});

这样既可以阻止手动输入日期，又不会影响日期选择器的正常操作。

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