changes

app/assets/styles/main.scss

@@ -10,22 +10,6 @@
   font-size: 15px;
 }
 
-// Block Layout
-.blockdiv {
-  max-width: 1900px !important;
-  padding: 1rem 2rem 2rem;
-  @include mobile {
-    padding: 1rem;
-  }
-
-  .columns .column {
-    @include mobile {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-}
-
 // Tooltip Styles
 .tooltiptext {
   visibility: hidden;

app/components/datepicker/Datepicker.vue

@@ -23,7 +23,7 @@
         role="menu"
         @click="doClick()"
       >
-        <div class="dropdown-content">
+        <div class="dropdown-content px-2 w-xs">
           <PickDay
             v-bind="{ date, maxdate }"
             @date="selectDate"
@@ -41,6 +41,8 @@
   </div>
 </template>
 <script setup>
+import PickDay from "@/components/datepicker/PickDay.vue";
+
 const props = defineProps({
   record: Object,
   attr: String,
@@ -51,7 +53,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["date"]);
-const { $id, $copy, $dayjs, $empty } = useNuxtApp();
+const { $copy, $dayjs, $empty } = useNuxtApp();
 
 const date = ref();
 const show = ref();
@@ -144,8 +146,8 @@ function checkDate() {
   date.value = undefined;
   if ($empty(show.value)) return emit("date", null);
   show.value = getDate(show.value);
-  let val = `${show.value.substring(6, 10)}-${show.value.substring(3, 5)}-${show.value.substring(0, 2)}`;
-  if ($dayjs(val, "YYYY-MM-DD", true).isValid()) {
+  const val = `${show.value.substring(6, 10)}/${show.value.substring(3, 5)}/${show.value.substring(0, 2)}`;
+  if ($dayjs(val, "YYYY/MM/DD", true).isValid()) {
     date.value = val;
     emit("date", date.value);
   } else error.value = true;

app/components/datepicker/PickDay.vue

@@ -1,9 +1,6 @@
 <template>
-  <div
-    class="px-2"
-    style="width: 300px"
-  >
-    <div class="is-flex is-gap-1 is-justify-content-space-between is-align-items-stretch h-8">
+  <div class="is-flex is-flex-direction-column is-gap-1">
+    <div class="is-flex is-gap-1 is-justify-content-space-between h-8">
       <div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
         <button
           @click="previousYear"
@@ -29,17 +26,17 @@
           </span>
         </button>
       </div>
-      <div class="is-flex is-align-items-center is-gap-0">
+      <div class="buttons is-gap-0 m-0 is-align-items-center">
         <button
           v-if="type === 'days'"
           @click="type = 'months'"
-          class="button is-white p-2 has-text-primary font-bold h-full"
+          class="button is-white p-1.5 fs-14 has-text-primary font-semibold h-full"
         >
           T{{ month }}
         </button>
         <button
           @click="type = 'years'"
-          class="button is-white p-2 has-text-primary font-bold h-full"
+          class="button is-white p-1.5 fs-14 has-text-primary font-semibold h-full"
         >
           {{ caption || year }}
         </button>
@@ -70,59 +67,63 @@
         </button>
       </div>
     </div>
-    <hr class="mt-1 mb-5" />
     <div v-if="type === 'days'">
-      <div class="columns is-mobile mx-0 mb-3">
-        <div
-          v-for="(m, h) in dateOfWeek"
-          :key="h"
-          class="fs-14 column p-0 has-text-grey is-flex is-justify-content-center is-align-items-center"
-        >
-          {{ m.text }}
+      <div class="fixed-grid has-7-cols mb-1 fs-13 has-background-white-bis has-text-grey rounded-sm">
+        <div class="grid is-gap-0">
+          <p
+            v-for="(m, h) in dateOfWeek"
+            :key="h"
+            class="cell py-1 is-flex is-justify-content-center is-align-items-center is-unselectable"
+          >
+            {{ m.text }}
+          </p>
         </div>
       </div>
       <div
         v-for="(v, i) in weeks"
         :key="i"
-        :class="`columns is-mobile mx-0 mb-1 ${i === weeks.length - 1 ? 'mb-1' : ''}`"
+        class="fixed-grid has-7-cols mb-0"
       >
-        <div
-          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
-            v-if="m.disable"
-            class="fs-13 has-text-grey-lighter"
-          >
-            {{ m.dayPrint }}
-          </span>
-          <span
-            v-else
-            class="fs-13 is-clickable"
-            @click="choose(m)"
+        <div class="grid is-gap-0">
+          <div
+            v-for="(m, h) in v.dates"
+            :key="h"
+            class="cell is-flex is-justify-content-center is-align-items-center"
+            style="height: 32px"
           >
             <span
-              style="width: 25px; height: 25px"
+              v-if="m.disabled"
+              class="fs-13 has-text-grey-light is-unselectable"
+            >
+              {{ m.dayPrint.replace(/^0/, "") }}
+            </span>
+            <button
+              v-else
+              @click="choose(m)"
+              style="width: 26px; height: 26px"
               :class="[
-                'p-1 rounded-full is-flex is-justify-content-center is-align-items-center',
+                'button fs-13 font-normal p-1 rounded-full is-flex',
                 {
-                  'has-background-primary has-text-white': m.date === curdate,
-                  'has-background-success-50 has-text-white': m.date === today,
-                  'has-text-grey-light': m.currentMonth !== m.monthCondition,
+                  'is-white': m.date !== $dayjs(today).format('YYYY/MM/DD'),
+                  'is-primary': m.date === curdate,
+                  'has-text-grey': m.currentMonth !== m.monthCondition && m.date !== curdate,
                 },
               ]"
             >
-              {{ m.dayPrint }}
-            </span>
-          </span>
+              {{ m.dayPrint.replace(/^0/, "") }}
+            </button>
+          </div>
         </div>
       </div>
-      <hr class="my-1" />
-      <div class="mt-2 fs-14">
-        <span class="ml-2">Hôm nay: </span>
-        <a @click="chooseToday">{{ $dayjs(today).format("L") }}</a>
+      <hr class="my-2" />
+      <div class="mx-2 is-flex is-gap-0.5 is-align-items-center">
+        <p class="fs-14">Hôm nay:</p>
+        <button
+          @click="chooseToday"
+          class="button is-white has-text-primary-65 p-1 fs-14"
+        >
+          {{ $dayjs(today).format("L") }}
+        </button>
       </div>
     </div>
     <PickMonth
@@ -138,8 +139,8 @@
   </div>
 </template>
 <script setup>
-import PickMonth from "@/components/datepicker/PickMonth";
-import PickYear from "@/components/datepicker/PickYear";
+import PickMonth from "@/components/datepicker/PickMonth.vue";
+import PickYear from "@/components/datepicker/PickYear.vue";
 
 const { $id, $dayjs, $unique } = useNuxtApp();
 const emit = defineEmits(["date"]);
@@ -149,17 +150,17 @@ const props = defineProps({
 });
 const dates = ref([]);
 const dateOfWeek = [
-  { id: 0, text: "CN" },
-  { id: 1, text: "T2" },
+  { id: 0, text: "T2" },
   { id: 2, text: "T3" },
-  { id: 3, text: "T4" },
-  { id: 4, text: "T5" },
-  { id: 5, text: "T6" },
-  { id: 6, text: "T7" },
+  { id: 2, text: "T4" },
+  { id: 3, text: "T5" },
+  { id: 4, text: "T6" },
+  { id: 5, text: "T7" },
+  { id: 6, text: "CN" },
 ];
 const weeks = ref([]);
 const year = ref();
-let month;
+const month = ref();
 const type = ref("days");
 const caption = ref();
 const action = ref();
@@ -167,22 +168,22 @@ const curdate = ref();
 const today = new Date();
 
 function showDate() {
-  curdate.value = props.date ? props.date.replaceAll("-", "/") : undefined;
+  curdate.value = props.date;
   year.value = $dayjs(curdate.value || today).year();
-  month = $dayjs(curdate.value || today).month() + 1;
+  month.value = $dayjs(curdate.value || today).month() + 1;
   getDates();
 }
 function chooseToday() {
-  emit("date", $dayjs(today).format("YYYY-MM-DD")); //today.replaceAll('/', '-'))
+  emit("date", $dayjs(today).format("YYYY/MM/DD"));
   year.value = $dayjs(today).year();
-  month = $dayjs(today).month() + 1;
+  month.value = $dayjs(today).month() + 1;
   getDates();
 }
 function changeCaption(v) {
   caption.value = v;
 }
 function selectMonth(v) {
-  month = v;
+  month.value = v;
   getDates();
   type.value = "days";
 }
@@ -193,26 +194,26 @@ function selectYear(v) {
 }
 function getDates() {
   caption.value = undefined;
-  dates.value = allDaysInMonth(year.value, month);
+  dates.value = allDaysInMonth(year.value, month.value);
   weeks.value = $unique(dates.value, ["week"]).map((v) => {
     return { week: v.week };
   });
-  weeks.value.map((v) => {
+  weeks.value.forEach((v) => {
     v.dates = dates.value.filter((x) => x.week === v.week);
   });
 }
 function nextMonth() {
-  month = month + 1;
-  if (month > 12) {
-    month = 1;
+  month.value = month.value + 1;
+  if (month.value > 12) {
+    month.value = 1;
     year.value += 1;
   }
   getDates();
 }
 function previousMonth() {
-  month = month - 1;
-  if (month === 0) {
-    month = 12;
+  month.value = month.value - 1;
+  if (month.value === 0) {
+    month.value = 12;
     year.value -= 1;
   }
   getDates();
@@ -228,53 +229,52 @@ function previousYear() {
   getDates();
 }
 function choose(m) {
-  emit("date", m.date.replaceAll("/", "-"));
-}
-function createDate(v, x, y) {
-  return v + "/" + (x < 10 ? "0" + x.toString() : x.toString()) + "/" + (y < 10 ? "0" + y.toString() : y.toString());
+  emit("date", m.date);
 }
 function allDaysInMonth(year, month) {
-  let days = Array.from({ length: $dayjs(createDate(year, month, 1)).daysInMonth() }, (_, i) => i + 1);
-  let arr = [];
-  days.map((v) => {
+  const days = Array.from({ length: $dayjs([year, month, 1]).daysInMonth() }, (_, i) => i + 1);
+  const arr = [];
+
+  days.forEach((day) => {
     for (let i = 0; i < 7; i++) {
-      let thedate = $dayjs(createDate(year, month, v)).weekday(i);
-      let date = $dayjs(new Date(thedate.$d)).format("YYYY/MM/DD");
-      let dayPrint = $dayjs(new Date(thedate.$d)).format("DD");
-      let monthCondition = $dayjs(date).month() + 1;
-      let currentMonth = month;
-      let found = arr.find((x) => x.date === date);
+      const thedate = $dayjs([year, month, day]).weekday(i);
+      const date = thedate.format("YYYY/MM/DD");
+
+      const monthCondition = thedate.month() + 1;
+      const found = arr.find((x) => x.date === date);
+
       if (!found) {
-        let dayOfWeek = $dayjs(date).day();
-        let week = $dayjs(date).week();
-        let disable = false;
-        if (props.maxdate ? $dayjs(props.maxdate).diff(props.date, "day") >= 0 : false) {
-          if ($dayjs(props.maxdate).startOf("day").diff(date, "day") < 0) disable = true;
+        let disabled = false;
+        if (props.maxdate) {
+          const maxDateObj = $dayjs(props.maxdate);
+          if (maxDateObj.diff(props.date, "day") >= 0 && maxDateObj.startOf("day").diff(date, "day") < 0) {
+            disabled = true;
+          }
         }
-        let ele = {
-          date: date,
-          week: week,
-          day: v,
-          dayOfWeek: dayOfWeek,
-          dayPrint: dayPrint,
-          monthCondition: monthCondition,
-          currentMonth: currentMonth,
-          disable: disable,
+        const ele = {
+          date,
+          day,
+          week: thedate.week(),
+          dayOfWeek: thedate.day(),
+          dayPrint: thedate.format("DD"),
+          monthCondition,
+          currentMonth: month,
+          disabled,
         };
         arr.push(ele);
       }
     }
   });
+
   return arr;
 }
-// display
-showDate();
-// change date
+
 watch(
   () => props.date,
   () => {
     showDate();
   },
+  { immediate: true },
 );
 </script>
 <style scoped>

app/components/datepicker/PickMonth.vue

@@ -1,11 +1,26 @@
 <template>
-  <div class="columns is-mobile is-multiline mx-0">
-    <span
-      v-for="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
-      :id="String(month)"
-      class="column has-text-centered is-4 is-clickable fs-14"
-      @click="$emit('month', month)"
-      >Tháng {{ month }}
-    </span>
+  <div class="fixed-grid has-3-cols">
+    <div
+      class="grid"
+      style="gap: 0.5rem 0"
+    >
+      <div
+        v-for="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
+        :key="month"
+        class="cell is-flex"
+      >
+        <button
+          class="button is-white fs-14 w-full"
+          @click="$emit('month', month)"
+        >
+          Tháng {{ month }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
+<style scoped>
+.button {
+  --bulma-button-color-l: 25%;
+}
+</style>

app/components/datepicker/PickYear.vue

@@ -1,13 +1,22 @@
 <template>
-  <div class="columns is-mobile is-multiline mx-0">
-    <span
-      v-for="(year, i) in years"
-      :key="year"
-      :class="['column is-4 has-text-centered is-clickable fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
-      @click="$emit('year', year)"
+  <div class="fixed-grid has-3-cols">
+    <div
+      class="grid"
+      style="gap: 0.5rem 0"
     >
-      {{ year }}
-    </span>
+      <div
+        v-for="(year, i) in years"
+        :key="year"
+        class="cell"
+      >
+        <button
+          :class="['button is-white w-full fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
+          @click="emit('year', year)"
+        >
+          {{ year }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -17,13 +26,12 @@ const props = defineProps({
   action: Object,
 });
 
-const emit = defineEmits(["caption"]);
+const emit = defineEmits(["caption", "year"]);
 const years = ref(
   Array.from({ length: 12 })
     .fill(props.year)
     .map((y, i) => y + i - 6),
 );
-emit("caption", `${years.value[1]} – ${years.value[10]}`);
 
 watch(
   () => props.action,
@@ -33,9 +41,13 @@ watch(
   },
 );
 
-watch(years, () => {
-  emit("caption", `${years.value[1]} – ${years.value[10]}`);
-});
+watch(
+  years,
+  () => {
+    emit("caption", `${years.value[1]} – ${years.value[10]}`);
+  },
+  { immediate: true },
+);
 
 function next() {
   const baseYear = years.value[11];
@@ -51,3 +63,8 @@ function previous() {
     .map((y, i) => y + i - 6);
 }
 </script>
+<style scoped>
+.button {
+  --bulma-button-color-l: 25%;
+}
+</style>

app/pages/index.vue

@@ -102,3 +102,19 @@ function refresh() {
   setTimeout(() => (componentKey.value = copy));
 }
 </script>
+<style scoped>
+.blockdiv {
+  max-width: 1900px !important;
+  padding: 1rem 2rem 2rem;
+  @include mobile {
+    padding: 1rem;
+  }
+
+  .columns .column {
+    @include mobile {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+</style>