Search code examples
vue.js

Configure vcalendar default hour to 00

I'm using v-calendar datepicker 3.0

with configuration:

<DatePicker v-model="date" :mode="mode" :locale="locale" is24hr :model-config="modelConfig" @dayclick="pickDate" @input="pickDate" ref="calendar" @daykeydown="onKeydown" :popover="popoverOptions">

When in DateTime mode is seleced date , hour is automatically added according local time, example 11:00. Is there possible to configure that it is by default 00:00 ?

Solution

  • This is what I expected it to do, thnx @imhvost for initial code sample:

    <template>
  <v-date-picker is24hr v-model="date" mode="datetime" @dayclick="dayclick" />
</template>

<script setup>
import { ref, nextTick } from "vue";
import "v-calendar/dist/style.css";

// Initialize date as null by default
const date = ref(null);

const dayclick = async (day) => {
  await nextTick();
  const selectedDate = new Date(day.date);
  selectedDate.setHours(0, 0, 0, 0);
  date.value = selectedDate;
};
</script>

    Live demo