Vue Tailwind Datepicker

Appearance

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

Released under the MIT License.

Copyright © 2022 Alexandre Le Corre