fix(VDatePicker): set view-mode when selecting same month/year (#19153)

fixes #19132
vuetifyjs · Feb 21, 2024 · 25bbb7c · 25bbb7c
1 parent dd007f9
commit 25bbb7c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -182,7 +182,9 @@ export const VDatePicker = genericComponent<new <
       } else {
         year.value++
         month.value = 0
+        onUpdateYear(year.value)
       }
+      onUpdateMonth(month.value)
     }
 
     function onClickPrev () {
@@ -191,7 +193,9 @@ export const VDatePicker = genericComponent<new <
       } else {
         year.value--
         month.value = 11
+        onUpdateYear(year.value)
       }
+      onUpdateMonth(month.value)
     }
 
     function onClickDate () {
@@ -206,17 +210,17 @@ export const VDatePicker = genericComponent<new <
       viewMode.value = viewMode.value === 'year' ? 'month' : 'year'
     }
 
-    watch(month, () => {
+    function onUpdateMonth (value: number) {
       if (viewMode.value === 'months') onClickMonth()
 
-      emit('update:month', month.value)
-    })
+      emit('update:month', value)
+    }
 
-    watch(year, () => {
+    function onUpdateYear (value: number) {
       if (viewMode.value === 'year') onClickYear()
 
-      emit('update:year', year.value)
-    })
+      emit('update:year', value)
+    }
 
     watch(model, (val, oldVal) => {
       const before = adapter.date(wrapInArray(val)[0])
@@ -294,6 +298,7 @@ export const VDatePicker = genericComponent<new <
                       key="date-picker-months"
                       { ...datePickerMonthsProps }
                       v-model={ month.value }
+                      onUpdate:modelValue={ onUpdateMonth }
                       min={ minDate.value }
                       max={ maxDate.value }
                     />
@@ -302,6 +307,7 @@ export const VDatePicker = genericComponent<new <
                       key="date-picker-years"
                       { ...datePickerYearsProps }
                       v-model={ year.value }
+                      onUpdate:modelValue={ onUpdateYear }
                       min={ minDate.value }
                       max={ maxDate.value }
                     />
@@ -312,6 +318,8 @@ export const VDatePicker = genericComponent<new <
                       v-model={ model.value }
                       v-model:month={ month.value }
                       v-model:year={ year.value }
+                      onUpdate:month={ onUpdateMonth }
+                      onUpdate:year={ onUpdateYear }
                       min={ minDate.value }
                       max={ maxDate.value }
                     />

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonths.tsx
@@ -41,7 +41,7 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
     'update:modelValue': (date: any) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const adapter = useDate()
     const model = useProxiedModel(props, 'modelValue')
 
@@ -82,6 +82,10 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
             } as const
 
             function onClick (i: number) {
+              if (model.value === i) {
+                emit('update:modelValue', model.value)
+                return
+              }
               model.value = i
             }
 
@@ -93,7 +97,6 @@ export const VDatePickerMonths = genericComponent<VDatePickerMonthsSlots>()({
               <VBtn
                 key="month"
                 { ...btnProps }
-                onClick={ () => onClick(i) }
               />
             )
           })}

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerYears.tsx
@@ -51,7 +51,7 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
     'update:modelValue': (year: number) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { emit, slots }) {
     const adapter = useDate()
     const model = useProxiedModel(props, 'modelValue')
     const years = computed(() => {
@@ -109,7 +109,13 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
               rounded: true,
               text: year.text,
               variant: model.value === year.value ? 'flat' : 'text',
-              onClick: () => model.value = year.value,
+              onClick: () => {
+                if (model.value === year.value) {
+                  emit('update:modelValue', model.value)
+                  return
+                }
+                model.value = year.value
+              },
             } as const
 
             return slots.year?.({