fix: fix the mismatch between time range picker placeholder and timer…

…ange popover values (#6675) * fix: fix the mismatch between time range picker placeholder and timerange popover values * fix: fix the stale value issue in range picker --------- Co-authored-by: Vikrant Gupta <[email protected]>
SigNoz · Dec 20, 2024 · accafbc · accafbc
1 parent 8e7c78e
commit accafbc
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
@@ -3,9 +3,9 @@ import './RangePickerModal.styles.scss';
 import { DatePicker } from 'antd';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
-import dayjs from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -53,22 +53,32 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 		}
 		onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
 	};
-
 	const { timezone } = useTimezone();
+
+	const rangeValue: [Dayjs, Dayjs] = useMemo(
+		() => [
+			dayjs(minTime / 1000_000).tz(timezone.value),
+			dayjs(maxTime / 1000_000).tz(timezone.value),
+		],
+		[maxTime, minTime, timezone.value],
+	);
+
 	return (
 		<div className="custom-date-picker">
 			<RangePicker
 				disabledDate={disabledDate}
 				allowClear
-				showTime
-				format="YYYY-MM-DD hh:mm A"
+				showTime={{
+					use12Hours: true,
+					format: 'hh:mm A',
+				}}
+				format={(date: Dayjs): string =>
+					date.tz(timezone.value).format('YYYY-MM-DD hh:mm A')
+				}
 				onOk={onModalOkHandler}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(selectedTime === 'custom' && {
-					defaultValue: [
-						dayjs(minTime / 1000000).tz(timezone.value),
-						dayjs(maxTime / 1000000).tz(timezone.value),
-					],
+					value: rangeValue,
 				})}
 			/>
 		</div>