changes

app/components/datepicker/PickDay.vue

@@ -56,26 +56,26 @@
         </div>
       </div>
       <div
-        :class="`columns is-mobile mx-0 mb-1 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
         v-for="(v, i) in weeks"
         :key="i"
+        :class="`columns is-mobile mx-0 mb-1 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
       >
         <div
-          class="column p-0 is-flex is-justify-content-center is-align-items-center"
-          style="width: 40px; height: 32px"
           v-for="(m, h) in v.dates"
           :key="h"
+          class="column p-0 is-flex is-justify-content-center is-align-items-center"
+          style="width: 40px; height: 32px"
         >
           <span
-            class="fs-13 has-text-grey-80"
             v-if="m.disable"
+            class="fs-13 has-text-grey-80"
           >
             {{ m.dayPrint }}
           </span>
           <span
+            v-else
             class="fs-13 is-clickable"
             @click="choose(m)"
-            v-else
           >
             <span
               style="width: 25px; height: 25px"
@@ -96,36 +96,33 @@
       <hr class="my-1" />
       <div class="mt-2 fs-14">
         <span class="ml-2">Hôm nay: </span>
-        <a
-          class="has-text-primary"
-          @click="chooseToday()"
-          >{{ $dayjs(today).format("DD/MM/YYYY") }}</a
-        >
+        <a @click="chooseToday()">{{ $dayjs(today).format("L") }}</a>
       </div>
     </div>
     <PickMonth
       v-else-if="type === 'months'"
       @month="selectMonth"
-    ></PickMonth>
+    />
     <PickYear
       v-else-if="type === 'years'"
       v-bind="{ year, month, action }"
       @year="selectYear"
       @caption="changeCaption"
-    ></PickYear>
+    />
   </div>
 </template>
 <script setup>
 import PickMonth from "@/components/datepicker/PickMonth";
 import PickYear from "@/components/datepicker/PickYear";
+
 const { $id, $dayjs, $unique } = useNuxtApp();
 const emit = defineEmits(["date"]);
-var props = defineProps({
+const props = defineProps({
   date: String,
   maxdate: String,
 });
-var dates = [];
-var dateOfWeek = [
+const dates = ref([]);
+const dateOfWeek = [
   { id: 0, text: "CN" },
   { id: 1, text: "T2" },
   { id: 2, text: "T3" },
@@ -134,18 +131,19 @@ var dateOfWeek = [
   { id: 5, text: "T6" },
   { id: 6, text: "T7" },
 ];
-var weeks = ref([]);
-var year = ref(undefined);
-var month = undefined;
-var type = ref("days");
-var caption = ref(undefined);
-var action = ref(undefined);
-var curdate = undefined;
-var today = new Date();
+const weeks = ref([]);
+const year = ref();
+let month;
+const type = ref("days");
+const caption = ref();
+const action = ref();
+const curdate = ref();
+const today = new Date();
+
 function showDate() {
-  curdate = props.date ? props.date.replaceAll("-", "/") : undefined;
-  year.value = $dayjs(curdate || today).year();
-  month = $dayjs(curdate || today).month() + 1;
+  curdate.value = props.date ? props.date.replaceAll("-", "/") : undefined;
+  year.value = $dayjs(curdate.value || today).year();
+  month = $dayjs(curdate.value || today).month() + 1;
   getDates();
 }
 function chooseToday() {
@@ -169,12 +167,12 @@ function selectYear(v) {
 }
 function getDates() {
   caption.value = undefined;
-  dates = allDaysInMonth(year.value, month);
-  weeks.value = $unique(dates, ["week"]).map((v) => {
+  dates.value = allDaysInMonth(year.value, month);
+  weeks.value = $unique(dates.value, ["week"]).map((v) => {
     return { week: v.week };
   });
   weeks.value.map((v) => {
-    v.dates = dates.filter((x) => x.week === v.week);
+    v.dates = dates.value.filter((x) => x.week === v.week);
   });
 }
 function nextMonth() {
@@ -248,7 +246,7 @@ showDate();
 // change date
 watch(
   () => props.date,
-  (newVal, oldVal) => {
+  () => {
     showDate();
   },
 );