Skip to content

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

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

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

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

vue
<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 now supports on-the-fly locale importing, extending to day.js.
This means you only import the specific locale you need directly into your project, reducing unnecessary load of unused locales.

List of supported locales

vue
<script setup>
import { ref } from "vue";
// Import the specific locale from day.js
import 'dayjs/locale/fr'  // Replace 'fr' with your desired locale
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="fr"
    :auto-apply="false"
    :options="options"
    v-model="dateValue"
  />
</template>
<script setup>
import { ref } from "vue";
// Import the specific locale from day.js
import 'dayjs/locale/fr'  // Replace 'fr' with your desired locale
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="fr"
    :auto-apply="false"
    :options="options"
    v-model="dateValue"
  />
</template>

Released under the MIT License.