Events

selectMonth

Changed month event from dropdown for left/single calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onSelectSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-month="onSelectSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @select-month="onSelectSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onSelectSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-month="onSelectSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @select-month="onSelectSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

selectYear

Changed year event from dropdown for left/single calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onSelectSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-year="onSelectSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @select-year="onSelectSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onSelectSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-year="onSelectSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @select-year="onSelectSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

selectRightMonth

Changed month event from dropdown for right calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-right-month="onSelectSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-right-month="onSelectSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

selectRightYear

Changed year event from dropdown for right calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onSelectSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-right-year="onSelectSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onSelectSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @select-right-year="onSelectSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

clickPrev

Click previous button event for left/single calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-prev="onClickSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @click-prev="onClickSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-prev="onClickSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @click-prev="onClickSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

clickNext

Click next button event for left/single calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-next="onClickSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @click-next="onClickSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-next="onClickSomething($event)"
  />
  <vue-tailwind-datepicker
    v-model="dateValue"
    as-single
    @click-next="onClickSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

clickRightPrev

Click previous button event for right calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-right-prev="onClickSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-right-prev="onClickSomething($event)"
  />
</template>

INFO

The same works with no-input prop.

clickRightNext

Click next button event for right calendar.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-right-next="onClickSomething($event)"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);

const onClickSomething = (newDate) => {
  console.log(newDate); // newDate instanceof dayjs
};
</script>

<template>
  <vue-tailwind-datepicker
    v-model="dateValue"
    @click-right-next="onClickSomething($event)"
  />
</template>

INFO

The same works with no-input prop.