Events
select:month
Changed month event from dropdown for left/single calendar.
vue
<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.
select:year
Changed year event from dropdown for left/single calendar.
vue
<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.
select:right:month
Changed month event from dropdown for right calendar.
vue
<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.
select:right:year
Changed year event from dropdown for right calendar.
vue
<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.
click:prev
Click previous button event for left/single calendar.
vue
<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.
click:next
Click next button event for left/single calendar.
vue
<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.
click:right:prev
Click previous button event for right calendar.
vue
<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.
click:right:next
Click next button event for right calendar.
vue
<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.