From 095166ac9c5d4e3751d4291765291b835066f337 Mon Sep 17 00:00:00 2001
From: chouchouji <70570907+chouchouji@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:52:45 +0800
Subject: [PATCH] docs(site): add tooltip for example code actions (#1784)

* docs(site): add tooltip for example code actions

* test(date-picker): remove reset case
---
 .../components/code-example/CodeExample.vue   |  40 +-
 .../__snapshots__/index.spec.js.snap          | 874 ------------------
 .../src/date-picker/__tests__/index.spec.js   |  29 -
 3 files changed, 23 insertions(+), 920 deletions(-)

diff --git a/packages/varlet-cli/site/pc/components/code-example/CodeExample.vue b/packages/varlet-cli/site/pc/components/code-example/CodeExample.vue
index 57e4520661a..f77b48a1b24 100644
--- a/packages/varlet-cli/site/pc/components/code-example/CodeExample.vue
+++ b/packages/varlet-cli/site/pc/components/code-example/CodeExample.vue
@@ -1,23 +1,29 @@
 <template>
   <div class="var-site-code-example">
     <div class="var-site-code-example__toolbar">
-      <var-button text round @click="toggle" v-if="fold && !disabledFold">
-        <var-icon name="xml" size="18" />
-      </var-button>
-
-      <var-button
-        :id="`clip-trigger-${cid}`"
-        :data-clipboard-target="`#clip-target-${cid}`"
-        text
-        round
-        v-if="clipboard"
-      >
-        <var-icon name="content-copy" size="18" />
-      </var-button>
-
-      <var-button text round @click="toPlayground" v-if="playground">
-        <var-icon name="code-json" size="18" />
-      </var-button>
+      <var-tooltip placement="top" :content="height >= 0 ? 'Show Source' : 'Hide Source'">
+        <var-button text round @click="toggle" v-if="fold && !disabledFold">
+          <var-icon name="xml" size="18" />
+        </var-button>
+      </var-tooltip>
+
+      <var-tooltip placement="top" content="Copy Example Code">
+        <var-button
+          :id="`clip-trigger-${cid}`"
+          :data-clipboard-target="`#clip-target-${cid}`"
+          text
+          round
+          v-if="clipboard"
+        >
+          <var-icon name="content-copy" size="18" />
+        </var-button>
+      </var-tooltip>
+
+      <var-tooltip placement="top" content="Edit In Playground">
+        <var-button text round @click="toPlayground" v-if="playground">
+          <var-icon name="code-json" size="18" />
+        </var-button>
+      </var-tooltip>
     </div>
     <div
       :id="`clip-target-${cid}`"
diff --git a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
index a9be2a2ad8e..f85079922ea 100644
--- a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -54,880 +54,6 @@ exports[`test datePicker allowedDates 1`] = `
 </div>"
 `;
 
-exports[`test datePicker reset when modelValue is undefined or an empty string 1`] = `
-"<div class="var-date-picker">
-  <div class="var-date-picker__title">
-    <div class="var-date-picker__title-select">
-      <div class="var-date-picker__title-hint">选择日期</div>
-      <div class="var-date-picker__title-year">2024</div>
-    </div>
-    <div class="var-date-picker__title-date var-date-picker__title-date--active">
-      <transition-stub name="var-date-picker-translatey" appear="false" persisted="false" css="true">
-        <div>09-23 星期一</div>
-      </transition-stub>
-    </div>
-  </div>
-  <div class="var-date-picker__body">
-    <transition-stub name="var-date-picker-panel-fade" appear="false" persisted="false" css="true">
-      <div class="var-day-picker">
-        <div class="var-day-picker__content">
-          <div class="var-date-picker-header"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-left" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-            <div class="var-date-picker-header__value">
-              <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-                <div>2024 九月</div>
-              </transition-stub>
-            </div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-right" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-          </div>
-          <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-            <div>
-              <ul class="var-day-picker__head">
-                <li>日</li>
-                <li>一</li>
-                <li>二</li>
-                <li>三</li>
-                <li>四</li>
-                <li>五</li>
-                <li>六</li>
-              </ul>
-              <ul class="var-day-picker__body"></ul>
-            </div>
-          </transition-stub>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`test datePicker reset when modelValue is undefined or an empty string 2`] = `
-"<div class="var-date-picker">
-  <div class="var-date-picker__title">
-    <div class="var-date-picker__title-select">
-      <div class="var-date-picker__title-hint">选择日期</div>
-      <div class="var-date-picker__title-year">2024</div>
-    </div>
-    <div class="var-date-picker__title-date var-date-picker__title-date--active">
-      <transition-stub name="var-date-picker-translatey" appear="false" persisted="false" css="true">
-        <div>09-25 星期三</div>
-      </transition-stub>
-    </div>
-  </div>
-  <div class="var-date-picker__body">
-    <transition-stub name="var-date-picker-panel-fade" appear="false" persisted="false" css="true">
-      <div class="var-day-picker">
-        <div class="var-day-picker__content">
-          <div class="var-date-picker-header"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-left" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-            <div class="var-date-picker-header__value">
-              <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-                <div>2024 九月</div>
-              </transition-stub>
-            </div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-right" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-          </div>
-          <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-            <div>
-              <ul class="var-day-picker__head">
-                <li>日</li>
-                <li>一</li>
-                <li>二</li>
-                <li>三</li>
-                <li>四</li>
-                <li>五</li>
-                <li>六</li>
-              </ul>
-              <ul class="var-day-picker__body">
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">1</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">2</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">3</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">4</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">5</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">6</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">7</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">8</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">9</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">10</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">11</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">12</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">13</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">14</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">15</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">16</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">17</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">18</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">19</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">20</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">21</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">22</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">23</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">24</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="false">
-                    <!--v-if-->
-                    <div class="var-button__content">25</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">26</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">27</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">28</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">29</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">30</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-              </ul>
-            </div>
-          </transition-stub>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`test datePicker reset when modelValue is undefined or an empty string 3`] = `
-"<div class="var-date-picker">
-  <div class="var-date-picker__title">
-    <div class="var-date-picker__title-select">
-      <div class="var-date-picker__title-hint">选择日期</div>
-      <div class="var-date-picker__title-year">2024</div>
-    </div>
-    <div class="var-date-picker__title-date var-date-picker__title-date--active">
-      <transition-stub name="var-date-picker-translatey" appear="false" persisted="false" css="true">
-        <div>09-23 星期一</div>
-      </transition-stub>
-    </div>
-  </div>
-  <div class="var-date-picker__body">
-    <transition-stub name="var-date-picker-panel-fade" appear="false" persisted="false" css="true">
-      <div class="var-day-picker">
-        <div class="var-day-picker__content">
-          <div class="var-date-picker-header"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-left" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-            <div class="var-date-picker-header__value">
-              <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-                <div>2024 九月</div>
-              </transition-stub>
-            </div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-right" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-          </div>
-          <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-            <div>
-              <ul class="var-day-picker__head">
-                <li>日</li>
-                <li>一</li>
-                <li>二</li>
-                <li>三</li>
-                <li>四</li>
-                <li>五</li>
-                <li>六</li>
-              </ul>
-              <ul class="var-day-picker__body">
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">1</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">2</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">3</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">4</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">5</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">6</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">7</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">8</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">9</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">10</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">11</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">12</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">13</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">14</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">15</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">16</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">17</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">18</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">19</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">20</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">21</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">22</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="false">
-                    <!--v-if-->
-                    <div class="var-button__content">23</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">24</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-button--outline var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="false">
-                    <!--v-if-->
-                    <div class="var-button__content">25</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">26</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">27</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">28</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">29</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">30</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-              </ul>
-            </div>
-          </transition-stub>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`test datePicker reset when modelValue is undefined or an empty string 4`] = `
-"<div class="var-date-picker">
-  <div class="var-date-picker__title">
-    <div class="var-date-picker__title-select">
-      <div class="var-date-picker__title-hint">选择日期</div>
-      <div class="var-date-picker__title-year">2024</div>
-    </div>
-    <div class="var-date-picker__title-date var-date-picker__title-date--active">
-      <transition-stub name="var-date-picker-translatey" appear="false" persisted="false" css="true">
-        <div>09-25 星期三</div>
-      </transition-stub>
-    </div>
-  </div>
-  <div class="var-date-picker__body">
-    <transition-stub name="var-date-picker-panel-fade" appear="false" persisted="false" css="true">
-      <div class="var-day-picker">
-        <div class="var-day-picker__content">
-          <div class="var-date-picker-header"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-left" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-            <div class="var-date-picker-header__value">
-              <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-                <div>2024 九月</div>
-              </transition-stub>
-            </div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-right" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-          </div>
-          <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-            <div>
-              <ul class="var-day-picker__head">
-                <li>日</li>
-                <li>一</li>
-                <li>二</li>
-                <li>三</li>
-                <li>四</li>
-                <li>五</li>
-                <li>六</li>
-              </ul>
-              <ul class="var-day-picker__body">
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">1</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">2</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">3</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">4</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">5</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">6</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">7</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">8</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">9</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">10</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">11</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">12</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">13</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">14</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">15</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">16</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">17</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">18</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">19</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">20</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">21</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">22</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">23</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">24</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="false">
-                    <!--v-if-->
-                    <div class="var-button__content">25</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">26</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">27</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">28</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">29</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">30</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-              </ul>
-            </div>
-          </transition-stub>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <!--v-if-->
-</div>"
-`;
-
-exports[`test datePicker reset when modelValue is undefined or an empty string 5`] = `
-"<div class="var-date-picker">
-  <div class="var-date-picker__title">
-    <div class="var-date-picker__title-select">
-      <div class="var-date-picker__title-hint">选择日期</div>
-      <div class="var-date-picker__title-year">2024</div>
-    </div>
-    <div class="var-date-picker__title-date var-date-picker__title-date--active">
-      <transition-stub name="var-date-picker-translatey" appear="false" persisted="false" css="true">
-        <div>09-23 星期一</div>
-      </transition-stub>
-    </div>
-  </div>
-  <div class="var-date-picker__body">
-    <transition-stub name="var-date-picker-panel-fade" appear="false" persisted="false" css="true">
-      <div class="var-day-picker">
-        <div class="var-day-picker__content">
-          <div class="var-date-picker-header"><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-left" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-            <div class="var-date-picker-header__value">
-              <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-                <div>2024 九月</div>
-              </transition-stub>
-            </div><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-default var-button--round var-date-picker-header__arrow" type="button" var-date-picker-header-cover="">
-              <!--v-if-->
-              <div class="var-button__content"><i class="var-icon var-icon--set var-icon-chevron-right" style="transition-duration: 0ms;"></i></div>
-              <div class="var-hover-overlay"></div>
-            </button>
-          </div>
-          <transition-stub name="var-date-picker-translatex" appear="false" persisted="false" css="true">
-            <div>
-              <ul class="var-day-picker__head">
-                <li>日</li>
-                <li>一</li>
-                <li>二</li>
-                <li>三</li>
-                <li>四</li>
-                <li>五</li>
-                <li>六</li>
-              </ul>
-              <ul class="var-day-picker__body">
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">1</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">2</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">3</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">4</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">5</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">6</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">7</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">8</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">9</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">10</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">11</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">12</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">13</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">14</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">15</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">16</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">17</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">18</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">19</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">20</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">21</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">22</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-elevation--2 var-button--primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="false">
-                    <!--v-if-->
-                    <div class="var-button__content">23</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">24</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-button--outline var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="false">
-                    <!--v-if-->
-                    <div class="var-button__content">25</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">26</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">27</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">28</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">29</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-                <li><button class="var-button var--box var-button--normal var--inline-flex var-button--text var-button--text-primary var-button--round var-day-picker__button var-day-picker__button--usable" type="button" var-day-picker-cover="" var-date-picker-color-cover="true">
-                    <!--v-if-->
-                    <div class="var-button__content">30</div>
-                    <div class="var-hover-overlay"></div>
-                  </button></li>
-              </ul>
-            </div>
-          </transition-stub>
-        </div>
-      </div>
-    </transition-stub>
-  </div>
-  <!--v-if-->
-</div>"
-`;
-
 exports[`test datePicker style and type > test datePicker style and date 1`] = `
 "<div class="var-date-picker var-elevation--2">
   <div class="var-date-picker__title" style="background: purple;">
diff --git a/packages/varlet-ui/src/date-picker/__tests__/index.spec.js b/packages/varlet-ui/src/date-picker/__tests__/index.spec.js
index 167fe3ff8fb..f6e01fbbcc4 100644
--- a/packages/varlet-ui/src/date-picker/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/date-picker/__tests__/index.spec.js
@@ -422,32 +422,3 @@ test('test datePicker titleColor', async () => {
 
   wrapper.unmount()
 })
-
-test('test datePicker reset when modelValue is undefined or an empty string', async () => {
-  const wrapper = mount({
-    components: {
-      [VarDatePicker.name]: VarDatePicker,
-    },
-    data() {
-      return {
-        date: '2024-09-23',
-      }
-    },
-    template: `<var-date-picker v-model="date" />`,
-  })
-
-  expect(wrapper.html()).toMatchSnapshot()
-
-  await wrapper.setData({ date: undefined })
-  expect(wrapper.html()).toMatchSnapshot()
-
-  await wrapper.setData({ date: '2024-09-23' })
-  expect(wrapper.html()).toMatchSnapshot()
-
-  await wrapper.setData({ date: '' })
-  expect(wrapper.html()).toMatchSnapshot()
-
-  await wrapper.setData({ date: '2024-09-23' })
-  expect(wrapper.html()).toMatchSnapshot()
-  wrapper.unmount()
-})