Advanced Features

You can also access to advanced features like if you need different model values, apply a different language or customizing your shortcuts.

Use Array

<script setup>
import { ref } from "vue";
// use Array as model
const dateValue = ref([]);
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

<script setup>
import { ref } from "vue";
// use Array as model
const dateValue = ref([]);
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

Use Object

<script setup>
import { ref } from "vue";
// use Object as model
const dateValue = ref({
  startDate: "",
  endDate: "",
});
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

<script setup>
import { ref } from "vue";
// use Object as model
const dateValue = ref({
  startDate: "",
  endDate: "",
});
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

Use String

<script setup>
import { ref } from "vue";
// use String as model
const dateValue = ref("");
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

<script setup>
import { ref } from "vue";
// use String as model
const dateValue = ref("");
</script>

<template>
  <vue-tailwind-datepicker v-model="dateValue" />
</template>

Custom shortcuts

Create your custom shortcuts.

<script setup>
import { ref } from "vue";
const dateValue = ref([]);
const customShortcuts = () => {
  return [
    {
      label: "Last 15 Days",
      atClick: () => {
        const date = new Date();
        return [new Date(date.setDate(date.getDate() + 1)), date];
      },
    },
    {
      label: "Last Years",
      atClick: () => {
        const date = new Date();
        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
      },
    },
  ];
};
</script>

<template>
  <vue-tailwind-datepicker :shortcuts="customShortcuts" v-model="dateValue" />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);
const customShortcuts = () => {
  return [
    {
      label: "Last 15 Days",
      atClick: () => {
        const date = new Date();
        return [new Date(date.setDate(date.getDate() + 1)), date];
      },
    },
    {
      label: "Last Years",
      atClick: () => {
        const date = new Date();
        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
      },
    },
  ];
};
</script>

<template>
  <vue-tailwind-datepicker :shortcuts="customShortcuts" v-model="dateValue" />
</template>

Localization (i18n)

Vue Tailwind Datepicker extend to day.js
List of supported locales

<script setup>
import { ref } from "vue";
const dateValue = ref([]);
const options = ref({
  shortcuts: {
    today: "Hari ini",
    yesterday: "Kemarin",
    past: (period) => period + " hari terakhir",
    currentMonth: "Bulan ini",
    pastMonth: "Bulan lalu",
  },
  footer: {
    apply: "Terapkan",
    cancel: "Batal",
  },
});
</script>

<template>
  <vue-tailwind-datepicker
    i18n="id"
    :auto-apply="false"
    :options="options"
    v-model="dateValue"
  />
</template>

<script setup>
import { ref } from "vue";
const dateValue = ref([]);
const options = ref({
  shortcuts: {
    today: "Hari ini",
    yesterday: "Kemarin",
    past: (period) => period + " hari terakhir",
    currentMonth: "Bulan ini",
    pastMonth: "Bulan lalu",
  },
  footer: {
    apply: "Terapkan",
    cancel: "Batal",
  },
});
</script>

<template>
  <vue-tailwind-datepicker
    i18n="id"
    :auto-apply="false"
    :options="options"
    v-model="dateValue"
  />
</template>