如何在Vue.js中禁用input type="date"组件的周末日期？

嘿，刚好我之前处理过类似的需求，来给你详细说说怎么实现！原生的input type="date"本身没有直接禁用特定日期（比如周末）的属性，不过我们可以通过Vue的监听机制或者原生事件来做校验，要是想要更友好的日历交互，也可以用第三方组件来实现。

方法一：使用Vue的watch监听日期变化 #

通过监听v-model绑定的日期变量，判断选中的日期是否是周末，如果是就重置并提示用户：

<template>
  <div>
    <input 
      v-model="selDate" 
      type="date" 
      :min="today"
      placeholder="选择日期"
    />
    <span v-if="isWeekend" style="color: red; margin-left: 10px;">抱歉，不能选择周末哦！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selDate: '',
      // 格式化今天的日期，适配date输入框的格式要求
      today: new Date().toISOString().split('T')[0],
      isWeekend: false
    };
  },
  watch: {
    selDate(newSelectedDate) {
      if (!newSelectedDate) return;
      
      const date = new Date(newSelectedDate);
      // 周日的getDay()返回0，周六返回6
      const dayOfWeek = date.getDay();
      
      if (dayOfWeek === 0 || dayOfWeek === 6) {
        this.isWeekend = true;
        // 重置选中的日期
        this.selDate = '';
      } else {
        this.isWeekend = false;
      }
    }
  }
};
</script>

方法二：使用原生change事件处理 #

直接在input上绑定@change事件，实时校验用户选择的日期：

<template>
  <div>
    <input 
      v-model="selDate" 
      type="date" 
      :min="today"
      @change="validateDate"
      placeholder="选择日期"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selDate: '',
      today: new Date().toISOString().split('T')[0]
    };
  },
  methods: {
    validateDate(e) {
      const selectedDate = e.target.value;
      if (!selectedDate) return;
      
      const date = new Date(selectedDate);
      const dayOfWeek = date.getDay();
      
      if (dayOfWeek === 0 || dayOfWeek === 6) {
        alert('抱歉，周末日期无法选择！');
        this.selDate = '';
      }
    }
  }
};
</script>

更友好的方案：使用第三方日期选择器 #

如果想要让周末日期在日历面板里直接变灰不可点击（而不是选了之后才提示），推荐使用成熟的UI组件库，比如Element UI的el-date-picker，它支持disabled-date属性，可以轻松实现禁用周末：

<template>
  <el-date-picker
    v-model="selDate"
    type="date"
    :min="today"
    :disabled-date="disableWeekendDates"
    placeholder="选择日期"
    style="width: 200px;"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selDate: '',
      today: new Date()
    };
  },
  methods: {
    disableWeekendDates(date) {
      // 返回true表示禁用该日期
      const dayOfWeek = date.getDay();
      return dayOfWeek === 0 || dayOfWeek === 6;
    }
  }
};
</script>

这样用户在打开日历的时候，周末日期就直接是不可选状态，体验会好很多！

内容的提问来源于stack exchange，提问作者Martín Santini