<template>
<div class="flex">
<vue-tailwind-datepicker
i18n="nl"
:shortcuts="customShortcuts"
placeholder="Laatste 28 dagen"
:disable-date="dDate"
:formatter="formatter"
separator=" t/m "
:modelValue="props.modelValue"
@update:modelValue="emit('update:modelValue', $event)"
/>
</div>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue: Object,
})
const formatter = ref({
date: 'DD MMM YYYY',
month: 'MMM'
});
const dDate = (date) => {
return date > new Date();
}
const customShortcuts = () => {
return [
{
label: 'Vandaag',
atClick: () => {
const date = new Date();
return [
date,
date
];
}
},
{
label: 'Gisteren',
atClick: () => {
const date = new Date();
let yesterday = date.setDate(date.getDate() - 1)
return [
yesterday,
yesterday
];
}
},
{
label: 'Afgelopen 7 dagen',
atClick: () => {
const date = new Date();
return [
new Date(date.setDate(date.getDate() - 7)),
new Date()
];
}
},
{
label: 'Afgelopen 28 dagen',
atClick: () => {
const date = new Date();
return [
new Date(date.setDate(date.getDate() - 28)),
new Date()
];
}
},
{
label: 'Vorige week',
atClick: () => {
const date = new Date();
// +1 to get monday and -7 to get previous week
let prevDay = new Date(date.setDate(date.getDate() - date.getDay() + 1 - 7));
return [
new Date(date.setDate(date.getDate() - date.getDay() + 1 - 7)),
prevDay.setDate(date.getDate() + 6)
];
}
},
{
label: 'Vorige maand',
atClick: () => {
const date = new Date();
return [
new Date(date.getFullYear(), date.getMonth() - 1, 1),
new Date(date.getFullYear(), date.getMonth(), 0)
];
}
},
{
label: 'Vorig jaar',
atClick: () => {
const date = new Date();
return [
new Date(date.getFullYear() - 1, 0, 1),
new Date(date.getFullYear(), 0, 0)
];
}
},
{
label: 'Deze maand',
atClick: () => {
const date = new Date();
return [
new Date(date.getFullYear(), date.getMonth(), 1),
date
];
}
},
{
label: 'Dit jaar',
atClick: () => {
const date = new Date();
return [
new Date(date.getFullYear(), 0, 1),
date
];
}
}
];
}
</script>
See error
[nuxt] [request error] Invalid URL ()
at async $fetchRaw2 (<dir>/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
at async default (<dir>/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:16:23)
at async Object.renderToString (<dir>/node_modules/vue-bundle-renderer/dist/index.mjs:264:19)
at async <dir>/.nuxt/dev/index.mjs:465:20
at async <dir>/node_modules/h3/dist/index.mjs:420:19
at async Server.nodeHandler (<dir>/node_modules/h3/dist/index.mjs:370:7)
When looking at editor warning:
Argument type of VueTailwindDatePicker is not assignable to parameter type plugin_2
Expected behavior
Expect to not have run errors.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop & mobile (please complete the following information):
Describe the bug Adding vue-tailwind-datepicker in the same way as litepie-datepicker into nuxt3 project fails.
To Reproduce Steps to reproduce the behavior:
When looking at editor warning:
Argument type of VueTailwindDatePicker is not assignable to parameter type plugin_2
Expected behavior Expect to not have run errors.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop & mobile (please complete the following information):