Vue3 datepicker : disable left and right arrows

Question

I am using @vuepic/vue3datepicker and I would like to disable or hide the next and previous arrows to prevent the user checking data outside the current month:

I did not find a useful prop to use for this purpose.

I tried the :hide-navigation prop but it did not work.

Any suggestions ?

Answer 1

The arrows can be disabled if the mininum and maximum dates fall within the current month and prevent-min-max-navigation prop is used.

<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>

There's also the disable-month-year-select prop that will hide the header of the calendar picker which includes the arrows.