Refactor DatePicker component

This commit is contained in:
Dede Fuji Abdul 2024-02-26 09:03:47 +07:00
parent 1605b41be1
commit e8ed93af03

View File

@ -27,7 +27,7 @@ const customShortcuts = () => {
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]; return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
}, },
}, },
]; ];
}; };
watch(dateValue, (newValue) => { watch(dateValue, (newValue) => {
@ -37,22 +37,12 @@ watch(dateValue, (newValue) => {
<template> <template>
<div class="flex"> <div class="flex">
<vue-tailwind-datepicker <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts"
v-model="dateValue" :auto-apply="true" as-single use-range v-slot="{ value, placeholder }">
:formatter="formatter"
separator=" s/d "
:shortcuts="customShortcuts"
:auto-apply="true"
as-single
use-range
v-slot="{ value, placeholder }"
>
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<button <button type="button"
type="button" class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
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"> <span class="text-gray-900">
{{ value || placeholder }} {{ value || placeholder }}
</span> </span>