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>
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>
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>
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>
Localization (i18n)
Vue Tailwind Datepicker extend to day.js
List of supported locales
vue
<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>