From 68cead085cf09109f1d9d5a069ceffa5565e494b Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Tue, 17 Dec 2024 08:14:01 +0430
Subject: [PATCH 1/2] fix: fix the mismatch between time range picker
 placeholder and timerange popover values

---
 .../CustomTimePicker/RangePickerModal.tsx     | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
index 862d63e922..0866bf0179 100644
--- 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 defaultValue = useMemo(
+		(): [Dayjs, Dayjs] => [
+			dayjs(minTime / 1000_000).tz(timezone.value),
+			dayjs(maxTime / 1000_000).tz(timezone.value),
+		],
+		[minTime, maxTime, 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),
-					],
+					defaultValue,
 				})}
 			/>
 		</div>

From c4cc03542d1ef125b15440ea0be762e494cf07fd Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Thu, 19 Dec 2024 20:01:21 +0430
Subject: [PATCH 2/2] fix: fix the stale value issue in range picker

---
 .../src/components/CustomTimePicker/RangePickerModal.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
index 0866bf0179..188fc5837b 100644
--- a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
+++ b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
@@ -55,12 +55,12 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 	};
 	const { timezone } = useTimezone();
 
-	const defaultValue = useMemo(
-		(): [Dayjs, Dayjs] => [
+	const rangeValue: [Dayjs, Dayjs] = useMemo(
+		() => [
 			dayjs(minTime / 1000_000).tz(timezone.value),
 			dayjs(maxTime / 1000_000).tz(timezone.value),
 		],
-		[minTime, maxTime, timezone.value],
+		[maxTime, minTime, timezone.value],
 	);
 
 	return (
@@ -78,7 +78,7 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
 				onOk={onModalOkHandler}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...(selectedTime === 'custom' && {
-					defaultValue,
+					value: rangeValue,
 				})}
 			/>
 		</div>