Início / coding / Perguntas / 78052355
Accepted
Billal Begueradj
Asked: 2024-02-24 20:15:59 +0800 CST

Vue3 datepicker: desativa as setas esquerda e direita

  • 772

Estou usando @vuepic/vue3datepicker e gostaria de desabilitar ou ocultar as setas seguinte e anterior para evitar que o usuário verifique dados fora do mês atual:

insira a descrição da imagem aqui

Não encontrei um suporte útil para usar para esse propósito.

Eu tentei o suporte :hide-navigation mas não funcionou.

Alguma sugestão ?

css

1 respostas

  1. Best Answer

    As setas podem ser desativadas se as datas mínima e máxima estiverem dentro do mês atual e a propriedade prevent-min-max-navigation for usada.

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

    Há também a opção desativar seleção de mês-ano que ocultará o cabeçalho do seletor de calendário que inclui as setas.

    • 1

relate perguntas