fix(VTimePicker): keep hour value when changing AM/PM

J-Sek · J-Sek · commit b030df8e77bc · 2026-03-11T21:48:05.000+01:00
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/components/VTimePicker/VTimePicker.tsx
@@ -114,6 +114,15 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
     watch(inputMinute, emitValue)
     watch(inputSecond, emitValue)
 
+    watch(period, (newPeriod, oldPeriod) => {
+      if (inputHour.value == null || newPeriod === oldPeriod) return
+      if (newPeriod === 'pm' && inputHour.value < 12) {
+        inputHour.value = inputHour.value + 12
+      } else if (newPeriod === 'am' && inputHour.value >= 12) {
+        inputHour.value = inputHour.value - 12
+      }
+    })
+
     watch(() => props.modelValue, val => setInputData(val))
 
     watch(() => props.useSeconds, (val, old) => {
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
@@ -226,8 +226,6 @@ export const VTimePickerControls = genericComponent()({
 
     function setPeriod (val: Period) {
       emit('update:period', val)
-      const next = findNextAllowed('hour', val === 'am' ? 23 : 11, true)
-      nextTick(() => hour.value = pad(next))
     }
 
     const hourInputRef = ref<VTimePickerField>()
diff --git a/packages/vuetify/src/components/VTimePicker/__tests__/VTimePicker.spec.browser.tsx b/packages/vuetify/src/components/VTimePicker/__tests__/VTimePicker.spec.browser.tsx
@@ -149,5 +149,39 @@ describe('VTimePicker', () => {
         expect(minuteInput).not.toHaveClass('v-input--error')
       })
     })
+
+    describe('AM/PM period toggle', () => {
+      it('should preserve hour value when switching between AM and PM', async () => {
+        const model = ref<string | null>('09:45')
+        render(() => (
+          <VTimePicker
+            v-model={ model.value }
+            variant="input"
+          />
+        ))
+
+        expect(model.value).toBe('09:45')
+        await userEvent.click(screen.getByCSS('.v-time-picker-controls__ampm__pm'))
+        expect(model.value).toBe('21:45')
+        await userEvent.click(screen.getByCSS('.v-time-picker-controls__ampm__am'))
+        expect(model.value).toBe('09:45')
+      })
+
+      it('should preserve hour 12 when switching periods', async () => {
+        const model = ref<string | null>('00:15')
+        render(() => (
+          <VTimePicker
+            v-model={ model.value }
+            variant="input"
+          />
+        ))
+
+        expect(model.value).toBe('00:15')
+        await userEvent.click(screen.getByCSS('.v-time-picker-controls__ampm__pm'))
+        expect(model.value).toBe('12:15')
+        await userEvent.click(screen.getByCSS('.v-time-picker-controls__ampm__am'))
+        expect(model.value).toBe('00:15')
+      })
+    })
   })
 })

Original file line number	Diff line number	Diff line change
`@@ -226,8 +226,6 @@ export const VTimePickerControls = genericComponent()({`
`226`	`226`
`227`	`227`	`function setPeriod (val: Period) {`
`228`	`228`	`emit('update:period', val)`
`229`		`- const next = findNextAllowed('hour', val === 'am' ? 23 : 11, true)`
`230`		`- nextTick(() => hour.value = pad(next))`
`231`	`229`	`}`
`232`	`230`
`233`	`231`	`const hourInputRef = ref<VTimePickerField>()`