From 0da20c2e95101606824577c35c260a8eaa39f4bb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 04:23:26 +0700
Subject: [PATCH] Refactor DatePicker.vue component

---
 src/components/DatePicker.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index a906023..1821a2f 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -3,7 +3,9 @@ import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
-const dateValue = ref('')
+const dateValue = ref(
+  `${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
+)
 const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
@@ -36,12 +38,22 @@ watch(dateValue, (newValue) => {
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts"
-      :auto-apply="true" as-single use-range v-slot="{ value, placeholder }">
+    <vue-tailwind-datepicker
+      v-model="dateValue"
+      :formatter="formatter"
+      separator=" s/d "
+      :shortcuts="customShortcuts"
+      :auto-apply="true"
+      as-single
+      use-range
+      v-slot="{ value, placeholder }"
+    >
       <div class="flex">
         <div class="flex-1">
-          <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">
+          <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"
+          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>