如何禁用或隐藏@vuepic/vue3datepicker的左右切换箭头？

架构老林

2026-6-29

解决@vuepic/vue3datepicker隐藏/禁用月份切换箭头的方案

方法1：利用插槽自定义空导航箭头

组件支持通过插槽自定义导航区域的箭头，直接将左右箭头插槽替换为空内容即可隐藏：

<template>
  <DatePicker>
    <template #left-navigation-icon></template>
    <template #right-navigation-icon></template>
  </DatePicker>
</template>

<script setup>
import DatePicker from '@vuepic/vue3-datepicker';
import '@vuepic/vue3-datepicker/dist/main.css';
</script>

方法2：通过CSS强制隐藏或禁用箭头

如果插槽方式不适用，直接用CSS定位箭头元素进行处理：

完全隐藏箭头：

.vdp-nav-prev, .vdp-nav-next {
  display: none !important;
}

禁用点击（保留视觉样式但不可交互）：

.vdp-nav-prev, .vdp-nav-next {
  pointer-events: none;
  opacity: 0.5;
}

方法3：结合日期范围限制彻底锁死当前月份

为了完全阻止用户访问当前月份以外的数据，建议同时设置min-date和max-date为当前月份的首尾日期，避免用户通过其他方式（如手动输入）选择外月份日期：

<template>
  <DatePicker
    :min-date="currentMonthStart"
    :max-date="currentMonthEnd"
  ></DatePicker>
</template>

<script setup>
import { ref } from 'vue';
import DatePicker from '@vuepic/vue3-datepicker';
import '@vuepic/vue3-datepicker/dist/main.css';

const today = new Date();
// 当前月份第一天
const currentMonthStart = ref(new Date(today.getFullYear(), today.getMonth(), 1));
// 当前月份最后一天
const currentMonthEnd = ref(new Date(today.getFullYear(), today.getMonth() + 1, 0));
</script>