VCalendar日期选择器配置问题：禁用特定日期、限制范围及移除分钟选项

1. 如何禁用特定日期的选择？ #

用VCalendar的disabled-dates属性即可，支持数组或判断函数两种方式：

• 数组指定禁用日期
  直接把要禁用的日期对象放进数组：

<v-date-picker
  :disabled-dates="[new Date('2024-05-15'), new Date('2024-05-20')]"
/>

• 判断函数动态禁用
  适合批量禁用（比如过去日期、周末）：

<v-date-picker
  :disabled-dates="(date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    // 禁用今天之前的所有日期
    return date < today;
  }"
/>

2. 如何禁止范围选择器选中同一天？ #

监听input事件，发现开始和结束日期相同时重置结束日期：

<v-date-picker
  mode="range"
  v-model="dateRange"
  @input="handleRangeInput"
/>

<script setup>
import { ref } from 'vue';
const dateRange = ref({ start: null, end: null });

const handleRangeInput = (value) => {
  if (value.start && value.end && value.start.getTime() === value.end.getTime()) {
    dateRange.value = { start: value.start, end: null };
  }
};
</script>

也可以用disabled-dates配合，让结束日期无法选和开始相同的那天：

<v-date-picker
  mode="range"
  v-model="dateRange"
  :disabled-dates="(date) => {
    if (!dateRange.value.start) return false;
    const start = new Date(dateRange.value.start);
    start.setHours(0, 0, 0, 0);
    const target = new Date(date);
    target.setHours(0, 0, 0, 0);
    return target.getTime() === start.getTime();
  }"
/>

3. 如何移除分钟选择选项？ #

只设:minute-increment="60"只会让分钟步长变成60，但不会隐藏分钟选择UI。试试这两种方法：

方法1：直接隐藏分钟选择器 #

用hide-minute属性隐藏分钟组件：

<v-date-picker
  time-mode="24hr"
  hide-minute
/>

方法2：锁定分钟为00并禁用输入 #

设置不含分钟的时间格式，同时禁用分钟输入：

<v-date-picker
  time-mode="24hr"
  format="YYYY-MM-DD HH"
  :minute-increment="60"
  :time-picker-props="{
    minute: { disabled: true }
  }"
/>

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