diff --git a/packages/@react-spectrum/datepicker/test/TimeField.test.js b/packages/@react-spectrum/datepicker/test/TimeField.test.js
index b1b0570bf1d..0b6bee9627d 100644
--- a/packages/@react-spectrum/datepicker/test/TimeField.test.js
+++ b/packages/@react-spectrum/datepicker/test/TimeField.test.js
@@ -13,7 +13,7 @@
 import {act, fireEvent, pointerMap, render as render_, within} from '@react-spectrum/test-utils-internal';
 import {Button} from '@react-spectrum/button';
 import {Form} from '@react-spectrum/form';
-import {parseZonedDateTime, Time} from '@internationalized/date';
+import {parseTime, parseZonedDateTime, Time} from '@internationalized/date';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {theme} from '@react-spectrum/theme-default';
@@ -167,6 +167,23 @@ describe('TimeField', function () {
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
     });
 
+    it('should keep dayPeriod the same when hour segment that has a value >= 12 is cleared', async function () {
+      let {getAllByRole} = render(<TimeField label="Time" defaultValue={parseTime('20:24')} />);
+      let segments = getAllByRole('spinbutton');
+
+      await user.tab();
+      expect(segments[0]).toHaveFocus();
+      expect(segments[0]).toHaveAttribute('aria-valuetext', '8 PM');
+      expect(segments[2].getAttribute('aria-label')).toBe('AM/PM, ');
+      expect(within(segments[2]).getByText('PM')).toBeInTheDocument();
+
+      fireEvent.keyDown(document.activeElement, {key: 'Backspace'});
+      fireEvent.keyUp(document.activeElement, {key: 'Backspace'});
+      expect(segments[0]).toHaveAttribute('aria-valuetext', 'Empty');
+      expect(segments[2].getAttribute('aria-label')).toBe('AM/PM, ');
+      expect(within(segments[2]).getByText('PM')).toBeInTheDocument();
+    });
+
     it('should trigger right arrow key event for segment navigation', async function () {
       let {getAllByRole} = render(<TimeField label="Time" onKeyDown={onKeyDownSpy} onKeyUp={onKeyUpSpy} />);
       let segments = getAllByRole('spinbutton');
diff --git a/packages/@react-stately/datepicker/src/useDateFieldState.ts b/packages/@react-stately/datepicker/src/useDateFieldState.ts
index da1eed6d66c..6eaf4426995 100644
--- a/packages/@react-stately/datepicker/src/useDateFieldState.ts
+++ b/packages/@react-stately/datepicker/src/useDateFieldState.ts
@@ -399,6 +399,8 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
         } else if (!isPM && shouldBePM) {
           value = displayValue.set({hour: displayValue.hour + 12});
         }
+      } else if (part === 'hour' && 'hour' in displayValue && displayValue.hour >= 12 && validSegments.dayPeriod) {
+        value = displayValue.set({hour: placeholder['hour'] + 12});
       } else if (part in displayValue) {
         value = displayValue.set({[part]: placeholder[part]});
       }