fix(date-picker): Fixed the issue of inconsistent years in preview mode and close #1959

Author: haoziqaq

packages/varlet-ui/src/date-picker/DatePicker.vue

@@ -8,8 +8,8 @@
           :class="classes(n('title-year'), [isYearPanel, n('title-year--active')])"
           @click="clickEl('year')"
         >
-          <slot name="year" :year="chooseYear">
-            {{ chooseYear }}
+          <slot name="year" :year="displayYear">
+            {{ displayYear }}
           </slot>
         </div>
       </div>
@@ -185,6 +185,7 @@ export default defineComponent({
       previewMonth: previewMonth.value,
       previewYear: previewYear.value,
     }))
+    const displayYear = computed<string>(() => previewYear.value || chooseYear.value || '')
 
     const getYearTitle = computed<string>(() => {
       const { multiple, range } = props
@@ -600,6 +601,7 @@ export default defineComponent({
       chooseYear,
       chooseDay,
       previewYear,
+      displayYear,
       isYearPanel,
       isMonthPanel,
       getMonthTitle,

packages/varlet-ui/src/date-picker/__tests__/index.spec.js

@@ -217,6 +217,47 @@ test('datePicker v-model', async () => {
   wrapper.unmount()
 })
 
+test('datePicker should update title year on year preview change', async () => {
+  const wrapper = mount(VarDatePicker, {
+    props: {
+      modelValue: '2021-05-19',
+    },
+  })
+
+  await delay(0)
+  expect(wrapper.find('.var-date-picker__title-year').text()).toBe('2021')
+
+  await wrapper.find('.var-date-picker__title-year').trigger('click')
+  await delay(200)
+  await wrapper.find('.var-year-picker').find('li').find('button').trigger('click')
+  await delay(200)
+
+  expect(wrapper.find('.var-date-picker__title-year').text()).toBe('2000')
+  expect(wrapper.emitted()['update:modelValue']).toBeFalsy()
+
+  wrapper.unmount()
+})
+
+test('datePicker should update title year when month preview crosses year', async () => {
+  const wrapper = mount(VarDatePicker, {
+    props: {
+      type: 'month',
+      modelValue: '2021-01',
+    },
+  })
+
+  await delay(0)
+  expect(wrapper.find('.var-date-picker__title-year').text()).toBe('2021')
+
+  await wrapper.find('.var-date-picker-header').find('button').trigger('click')
+  await delay(200)
+
+  expect(wrapper.find('.var-date-picker__title-year').text()).toBe('2020')
+  expect(wrapper.emitted()['update:modelValue']).toBeFalsy()
+
+  wrapper.unmount()
+})
+
 test('datePicker multiple', async () => {
   const template = `<var-date-picker multiple v-model="date" :type="type"/>`
 

packages/varlet-ui/src/date-picker/example/index.vue

@@ -16,11 +16,15 @@ watchLang(use)
 onThemeChange()
 
 const allowedDates = (date) => parseInt(date.split('-')[2], 10) % 2 === 1
+
+function handlePreview(...args) {
+  console.log('preview', args)
+}
 </script>
 
 <template>
   <app-type>{{ t('basicUsage') }}</app-type>
-  <var-date-picker v-model="dates.date1" />
+  <var-date-picker v-model="dates.date1" @preview="handlePreview" />
 
   <app-type>{{ t('monthPicker') }}</app-type>
   <var-date-picker v-model="dates.date" type="month" />

pnpm-lock.yaml

@@ -12,7 +12,7 @@ catalog:
   live-server: ^1.2.1
   rimraf: ^5.0.1
   tinyexec: ^0.3.0
-  rattail: ^2.0.5
+  rattail: ^2.0.7
   vite-plus: 0.1.18
   '@types/node': ^20.19.0
   '@vitest/coverage-istanbul': 4.1.4