如何在v-calendar的datepicker中限制可选时间为9点至17点

v-calendar 时间范围限制解决方法 #

v-calendar 的 DatePicker 组件可以通过两种方式实现 9:00~17:00 的可选时间范围限制： #

方案1：使用disabled-dates属性全局禁用不符合要求的时间

该方案会自动将所有不在 9~17 点区间的时间置灰不可选，适配所有 v-calendar 版本：

1. 在组件逻辑中定义时间校验规则：

// Vue2 写在 methods 中，Vue3 写在 setup 中即可
const checkTimeValid = (date) => {
  const selectHour = date.getHours()
  // 仅允许9点（含）到17点（含）的时间
  return selectHour >= 9 && selectHour <= 17
}

2. 给<date-picker>组件新增disabled-dates属性：

<date-picker
    name="appointment-date"
    v-model="appointment_date"
    mode="dateTime"
    :is24hr="false"
    :min-date="currentDate"
    :model-config="dateTimePickerConfig"
    :popover="{
    visibility: 'click',
    placement:  'auto',
 }"
    :masks="{ inputDateTime: 'MM/DD/YYYY h:mmA'}"
    <!-- 新增以下配置 -->
    :disabled-dates="[{ test: (date) => !checkTimeValid(date) }]"
>
    <template v-slot="{ inputValue, inputEvents }">
        <div class="form-icon ">
            <input-component
                :value="inputValue"
                v-on="inputEvents"
                placeholder="MM-DD-YYYY h:mmA"
            />
            <Icon name="date-time"/>
        </div>
    </template>
</date-picker>

方案2：直接限制小时选择器的可选范围

如果不想让用户看到非法的小时选项，可以直接配置时间选择器的上下限，适配 v-calendar 2.0 及以上版本：

<date-picker
  <!-- 原有属性保持不变 -->
  :time-picker="{
    hours: {
      min: 9,
      max: 17
    }
  }"
>

如果需要更精细化的限制（比如午休12~13点不可选、节假日不可预约等），只需要在disabled-dates的test函数中补充对应的判断逻辑即可。

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