34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useDateStore } from '@/stores/date';
|
|
import { PhCalendarBlank } from '@phosphor-icons/vue';
|
|
import { ref, watch } from 'vue'
|
|
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
|
const dateValue = ref('')
|
|
const formatter = ref({
|
|
date: 'DD-MM-YYYY',
|
|
month: 'MMMM'
|
|
})
|
|
watch(dateValue, (newValue) => {
|
|
useDateStore().setDateValue(newValue);
|
|
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex">
|
|
<vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
|
|
:auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
|
|
<div class="flex">
|
|
<div class="flex-1">
|
|
<button type="button"
|
|
class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
|
<span class="text-gray-900">
|
|
{{ value || placeholder }}
|
|
</span>
|
|
<PhCalendarBlank size="18" weight="regular" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</vue-tailwind-datepicker>
|
|
</div>
|
|
</template> |