How can I disable selecting a particular date in a VCalendar Date Picker?

294 Views Asked by At

How can I make it impossible to select the same date for a Date Picker range ?

here just like this - and choose the interval

and here one date is selected by double click

And how to remove the option to select minutes?

enter image description here

I tried to remove the ability to select minutes using :minute-increment="60"

enter image description here

1

There are 1 best solutions below

2
Samuel RIGAUD On BEST ANSWER

To disable minute selection, you can add a rule to fix them to 0. See the documentation.

<template>
  <VDatePicker v-model="date" mode="dateTime" :rules="rules" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date(2000, 0, 15));
const rules = {
  minutes: 0,
  seconds: 0,
  milliseconds: 0,
};
</script>