Css Vue3日期 Select 器：禁用向左和向右箭头

发布于02月24日

我使用的是@vuepic/vue3datepicker ，我想禁用或隐藏下一个和上一个箭头，以防止用户判断当月以外的数据:

我没有找到一个有用的props 用于此目的.

我试了试:hide-navigation props ，但它不起作用.

有什么建议吗？

推荐答案

如果最小日期和最大日期落在当月内并且使用prevent-min-max-navigationprops ，则可以禁用箭头.

<VueDatePicker
  v-model="date"
  :min-date="minDate"
  :max-date="maxDate"
  prevent-min-max-navigation
  hide-offset-dates
/>

<script setup>
import { ref, computed } from 'vue'
import { startOfMonth, endOfMonth } from 'date-fns'

const date = ref(new Date())
const minDate = computed(() => startOfMonth(new Date()))
const maxDate = computed(() => endOfMonth(new Date()))
</script>

还有disable-month-year-selectprops ，可以隐藏日历选取器的标题，其中包括箭头.