changes

app/components/datepicker/Datepicker.vue

@@ -25,7 +25,7 @@
       >
         <div class="dropdown-content px-2 w-xs">
           <PickDay
-            v-bind="{ date, maxdate }"
+            v-bind="{ date, mindate, maxdate }"
             @date="selectDate"
           />
         </div>

app/components/datepicker/PickDay.vue

@@ -1,7 +1,7 @@
 <template>
   <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">
+      <div class="buttons is-gap-0 m-0 is-align-items-stretch">
         <button
           @click="previousYear"
           class="button is-text rounded-full"
@@ -41,7 +41,7 @@
           {{ caption || year }}
         </button>
       </div>
-      <div class="buttons is-gap-0.5 m-0 is-align-items-stretch">
+      <div class="buttons is-gap-0 m-0 is-align-items-stretch">
         <button
           class="button is-text rounded-full"
           @click="nextMonth"
@@ -68,7 +68,7 @@
       </div>
     </div>
     <div v-if="type === 'days'">
-      <div class="fixed-grid has-7-cols mb-1 fs-13 has-background-white-bis has-text-grey rounded-sm">
+      <div class="fixed-grid has-7-cols mb-1 fs-12 font-medium has-background-white-bis has-text-grey rounded-full">
         <div class="grid is-gap-0">
           <p
             v-for="(m, h) in dateOfWeek"
@@ -146,6 +146,7 @@ const { $id, $dayjs, $unique } = useNuxtApp();
 const emit = defineEmits(["date"]);
 const props = defineProps({
   date: String,
+  mindate: [Date, String],
   maxdate: [Date, String],
 });
 const dates = ref([]);
@@ -247,10 +248,24 @@ function allDaysInMonth(year, month) {
         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) {
+          if (
+            maxDateObj.startOf("day").diff(props.date, "day") >= 0 &&
+            maxDateObj.startOf("day").diff(date, "day") < 0
+          ) {
             disabled = true;
           }
         }
+
+        if (props.mindate) {
+          const minDateObj = $dayjs(props.mindate);
+          if (
+            minDateObj.startOf("day").diff(props.date, "day") < 0 &&
+            minDateObj.startOf("day").diff(date, "day") >= 0
+          ) {
+            disabled = true;
+          }
+        }
+
         const ele = {
           date,
           day,
@@ -278,9 +293,6 @@ watch(
 );
 </script>
 <style scoped>
-a {
-  color: var(--bulma-link-60);
-}
 .control.has-icons-left .icon,
 .control.has-icons-right .icon {
   width: 100%;