changes

app/components/datepicker/Datepicker.vue

@@ -45,8 +45,8 @@ const props = defineProps({
   record: Object,
   attr: String,
   position: String,
-  mindate: String,
-  maxdate: String,
+  mindate: [Date, String],
+  maxdate: [Date, String],
   disabled: Boolean,
 });
 

app/components/datepicker/PickDay.vue

@@ -1,50 +1,76 @@
 <template>
   <div
-    class="p-2"
+    class="px-2"
     style="width: 300px"
   >
-    <div class="field is-grouped">
-      <div class="control pl-2">
-        <a
-          class="mr-1"
-          @click="previousYear()"
+    <div class="is-flex is-gap-1 is-justify-content-space-between is-align-items-stretch h-8">
+      <div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
+        <button
+          @click="previousYear"
+          class="button is-text rounded-full"
         >
-          <SvgIcon v-bind="{ name: 'doubleleft.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
-        <a
-          @click="previousMonth()"
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-double-arrow-left"
+              :size="24"
+            />
+          </span>
+        </button>
+        <button
           v-if="type === 'days'"
+          @click="previousMonth"
+          class="button is-text rounded-full"
         >
-          <SvgIcon v-bind="{ name: 'left1.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-arrow-left"
+              :size="24"
+            />
+          </span>
+        </button>
       </div>
-      <div class="control is-expanded has-text-centered">
-        <a
-          class="font-bold mr-2"
+      <div class="is-flex is-align-items-center is-gap-0">
+        <button
+          v-if="type === 'days'"
           @click="type = 'months'"
-          v-if="type === 'days'"
-          >{{ `T${month}` }}</a
+          class="button is-white p-2 has-text-primary font-bold h-full"
         >
-        <a
-          class="font-bold"
+          T{{ month }}
+        </button>
+        <button
           @click="type = 'years'"
-          >{{ caption || year }}</a
+          class="button is-white p-2 has-text-primary font-bold h-full"
         >
+          {{ caption || year }}
+        </button>
       </div>
-      <div class="control pr-2">
-        <a
-          class="mr-1"
-          @click="nextMonth()"
+      <div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
+        <button
+          class="button is-text rounded-full"
+          @click="nextMonth"
           v-if="type === 'days'"
         >
-          <SvgIcon v-bind="{ name: 'right.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
-        <a @click="nextYear()">
-          <SvgIcon v-bind="{ name: 'doubleright.svg', type: 'gray', size: 18 }"></SvgIcon>
-        </a>
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-arrow-right"
+              :size="24"
+            />
+          </span>
+        </button>
+        <button
+          @click="nextYear"
+          class="button is-text rounded-full"
+        >
+          <span class="icon">
+            <Icon
+              name="ic:baseline-keyboard-double-arrow-right"
+              :size="24"
+            />
+          </span>
+        </button>
       </div>
     </div>
-    <hr class="mt-0 mb-5" />
+    <hr class="mt-1 mb-5" />
     <div v-if="type === 'days'">
       <div class="columns is-mobile mx-0 mb-3">
         <div
@@ -80,9 +106,9 @@
             <span
               style="width: 25px; height: 25px"
               :class="[
-                'p-1 rounded-md is-flex is-justify-content-center is-align-items-center',
+                'p-1 rounded-full is-flex is-justify-content-center is-align-items-center',
                 {
-                  'has-background-primary-50 has-text-white': m.date === curdate,
+                  '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,
                 },
@@ -96,7 +122,7 @@
       <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>
+        <a @click="chooseToday">{{ $dayjs(today).format("L") }}</a>
       </div>
     </div>
     <PickMonth
@@ -119,7 +145,7 @@ const { $id, $dayjs, $unique } = useNuxtApp();
 const emit = defineEmits(["date"]);
 const props = defineProps({
   date: String,
-  maxdate: String,
+  maxdate: [Date, String],
 });
 const dates = ref([]);
 const dateOfWeek = [
@@ -255,4 +281,9 @@ watch(
 a {
   color: var(--bulma-link-60);
 }
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+  width: 100%;
+  height: 100%;
+}
 </style>