diff --git a/src/components/CalendarField.vue b/src/components/CalendarField.vue
index 65e28b3..8f2cb6c 100644
--- a/src/components/CalendarField.vue
+++ b/src/components/CalendarField.vue
@@ -14,13 +14,32 @@
       v-on="childListeners"
       @click="clickField"
     />
-    <van-calendar
-      color="#3074F6"
+    <van-popup
       v-model="showCalendar"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="onConfirm"
-    />
+      position="bottom"
+      closeable
+      round
+      safe-area-inset-bottom
+      close-on-click-overlay
+      close-on-popstate
+    >
+      <van-calendar
+          color="#3074F6"
+          :poppable="false"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @confirm="onConfirm"
+          :style="{ width: '100%', height: '80vh' }"
+      />
+    </van-popup>
+        <!--  上面的方法只有第一次加载的时候卡，之后加载不会卡  -->
+<!--    <van-calendar-->
+<!--      color="#3074F6"-->
+<!--      v-model="showCalendar"-->
+<!--      :min-date="minDate"-->
+<!--      :max-date="maxDate"-->
+<!--      @confirm="onConfirm"-->
+<!--    />-->
   </div>
 
 </template>
@@ -48,7 +67,7 @@ export default {
     return {
       showCalendar: false,
       minDate: new Date(2000, 0, 1),
-      maxDate: new Date(2500, 0, 1)
+      maxDate: new Date(2300, 0, 1) // 设置时间可选日期时间跨度太大的话显示和隐藏日历很卡
     }
   },
   computed: {