diff --git a/.changeset/fix-datetime-range-picker-enter-meridiem.md b/.changeset/fix-datetime-range-picker-enter-meridiem.md
new file mode 100644
index 000000000..7f04a699d
--- /dev/null
+++ b/.changeset/fix-datetime-range-picker-enter-meridiem.md
@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Keep the selected meridiem when committing a DateTimeRangePicker time with Enter.
diff --git a/src/components/DatePicker/DateTimeRangePicker.test.tsx b/src/components/DatePicker/DateTimeRangePicker.test.tsx
index 3d37a3be6..bbce7de6b 100644
--- a/src/components/DatePicker/DateTimeRangePicker.test.tsx
+++ b/src/components/DatePicker/DateTimeRangePicker.test.tsx
@@ -220,6 +220,35 @@ describe('DateTimeRangePicker', () => {
);
});
+ it('keeps the selected meridiem when Enter commits the time', async () => {
+ const handleSelectDate = vi.fn();
+
+ const { getByTestId, getByText } = renderCUI(
+
+ );
+
+ await userEvent.click(getByTestId('datetimepicker-input'));
+ await userEvent.click(getByText('4'));
+
+ const timeInput = getByTestId('date-time-picker-time-input');
+ await userEvent.click(timeInput);
+
+ // delete 0-0-:-2-1 (12:00)
+ await userEvent.keyboard(
+ '{backspace}{backspace}{backspace}{backspace}{backspace}2:37'
+ );
+
+ expect(getByTestId('datetimepicker-input').textContent).toBe(
+ 'Jul 04, 02:37 pm – end date'
+ );
+
+ await userEvent.keyboard('{Enter}');
+
+ expect(getByTestId('datetimepicker-input').textContent).toBe(
+ 'Jul 04, 02:37 pm – end date'
+ );
+ });
+
it('selects the end date with a time of noon', async () => {
const handleSelectDate = vi.fn();
diff --git a/src/components/DatePicker/DateTimeRangePicker.tsx b/src/components/DatePicker/DateTimeRangePicker.tsx
index b5931ea60..0182dd394 100644
--- a/src/components/DatePicker/DateTimeRangePicker.tsx
+++ b/src/components/DatePicker/DateTimeRangePicker.tsx
@@ -667,28 +667,10 @@ const TimeInput = ({ date, setDate, shouldShowSeconds, timezone }: TimeInputProp
const handleKeyDown = useCallback(
(event: KeyboardEvent) => {
if (event.key === 'Enter') {
- const { isValid, parsedDate } = parseTimeString(timeString);
-
- if (!isValid) {
- return;
- }
-
- if (!parsedDate) {
- return;
- }
-
- const newDate = shouldShowSeconds
- ? dayjsDate
- .hour(parsedDate.hour())
- .minute(parsedDate.minute())
- .second(parsedDate.second())
- .toDate()
- : dayjsDate.hour(parsedDate.hour()).minute(parsedDate.minute()).toDate();
-
- setDate(newDate);
+ handleTimeChange(timeString);
}
},
- [dayjsDate, setDate, shouldShowSeconds, timeString]
+ [handleTimeChange, timeString]
);
return (