From 1af86552ed74b0334c6f0ca5e416ddb195fdd7b0 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 13 Mar 2026 12:35:03 +0530
Subject: [PATCH 01/16] feat: date range filter UI and year picker fix (#81501)

---
 src/CONST/index.ts                            |   7 +
 .../DatePicker/CalendarPicker/Day.tsx         |   9 +-
 .../CalendarPicker/YearPickerModal.tsx        |   1 +
 .../DatePicker/CalendarPicker/index.tsx       |  25 +-
 .../FilterComponents/DateFilterBase.tsx       | 149 ++++---
 .../FilterComponents/DatePresetFilterBase.tsx | 413 ++++++++++++++----
 .../FilterComponents/RangeDatePicker.tsx      |  81 ++++
 .../FilterDropdowns/DateSelectPopup.tsx       | 266 +++++++++--
 .../Search/FilterDropdowns/DropdownButton.tsx |  12 +-
 .../Search/SearchDatePresetFilterBasePage.tsx |  32 +-
 .../DatePickerFilterPopup.tsx                 |   4 +-
 .../SearchPageHeader/useSearchFiltersBar.tsx  |  30 +-
 src/languages/de.ts                           |   6 +
 src/languages/en.ts                           |   6 +
 src/languages/es.ts                           |   6 +
 src/languages/fr.ts                           |   6 +
 src/languages/it.ts                           |   6 +
 src/languages/ja.ts                           |   6 +
 src/languages/nl.ts                           |   6 +
 src/languages/pl.ts                           |   6 +
 src/languages/pt-BR.ts                        |   6 +
 src/languages/zh-hans.ts                      |   6 +
 src/libs/DateUtils.ts                         |  11 +-
 src/libs/SearchQueryUtils.ts                  | 237 +++++++++-
 src/pages/Search/AdvancedSearchFilters.tsx    |  76 +++-
 .../ReportFieldDate.tsx                       |  13 +-
 .../SearchFiltersReportFieldPage/index.tsx    |  10 +-
 .../WorkspaceTravelInvoicingExportPage.tsx    |  25 +-
 src/types/form/SearchAdvancedFiltersForm.ts   |  19 +-
 tests/unit/Search/SearchQueryUtilsTest.ts     | 199 +++++++++
 30 files changed, 1435 insertions(+), 244 deletions(-)
 create mode 100644 src/components/Search/FilterComponents/RangeDatePicker.tsx

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index aa699de640f12..5e0892482a46a 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -248,6 +248,7 @@ const CONST = {
     POPOVER_MENU_MAX_HEIGHT: 496,
     POPOVER_MENU_MAX_HEIGHT_MOBILE: 432,
     POPOVER_DATE_WIDTH: 338,
+    POPOVER_DATE_RANGE_WIDTH: 672,
     POPOVER_DATE_MAX_HEIGHT: 366,
     POPOVER_DATE_MIN_HEIGHT: 322,
     TOOLTIP_ANIMATION_DURATION: 500,
@@ -7566,6 +7567,7 @@ const CONST = {
             EQUAL_TO: 'eq',
             CONTAINS: 'contains',
             NOT_EQUAL_TO: 'neq',
+            RANGE: 'range',
             GREATER_THAN: 'gt',
             GREATER_THAN_OR_EQUAL_TO: 'gte',
             LOWER_THAN: 'lt',
@@ -7640,6 +7642,7 @@ const CONST = {
             ON_PREFIX: 'reportFieldOn-',
             AFTER_PREFIX: 'reportFieldAfter-',
             BEFORE_PREFIX: 'reportFieldBefore-',
+            RANGE_PREFIX: 'reportFieldRange-',
         },
         TAG_EMPTY_VALUE: 'none',
         CATEGORY_EMPTY_VALUE: 'none',
@@ -7769,6 +7772,10 @@ const CONST = {
             ON: 'On',
             AFTER: 'After',
             BEFORE: 'Before',
+            RANGE: 'Range',
+        },
+        get CUSTOM_DATE_MODIFIERS() {
+            return [this.DATE_MODIFIERS.ON, this.DATE_MODIFIERS.BEFORE, this.DATE_MODIFIERS.AFTER] as const;
         },
         AMOUNT_MODIFIERS: {
             LESS_THAN: 'LessThan',
diff --git a/src/components/DatePicker/CalendarPicker/Day.tsx b/src/components/DatePicker/CalendarPicker/Day.tsx
index 3db884bb7fdc0..d1f22ceee8689 100644
--- a/src/components/DatePicker/CalendarPicker/Day.tsx
+++ b/src/components/DatePicker/CalendarPicker/Day.tsx
@@ -27,13 +27,16 @@ function Day({disabled, selected, pressed, hovered, children}: DayProps) {
     const StyleUtils = useStyleUtils();
     return (
         <View
+            // Prevent Android from flattening this View, which can cause background
+            // color changes (day selection) to not trigger a native repaint.
+            collapsable={false}
             style={[
                 themeStyles.calendarDayContainer,
-                selected ? themeStyles.buttonDefaultBG : {},
-                !disabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
+                selected ? themeStyles.buttonSuccess : {},
+                !disabled && !selected ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true) : {},
             ]}
         >
-            <Text style={disabled ? themeStyles.buttonOpacityDisabled : {}}>{children}</Text>
+            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.buttonSuccessText : {}]}>{children}</Text>
         </View>
     );
 }
diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
index 26b2909899d29..02916ae4baaf5 100644
--- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
+++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
@@ -73,6 +73,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 enableEdgeToEdgeBottomSafeAreaPadding
+                shouldEnablePickerAvoiding={false}
                 testID="YearPickerModal"
             >
                 <HeaderWithBackButton
diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index b520650c8c74c..b36411f521454 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -1,6 +1,7 @@
 import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -35,6 +36,9 @@ type CalendarPickerProps = {
 
     /** A function called when the date is selected */
     onSelected?: (selectedDate: string) => void;
+
+    /** Optional style override for the header container */
+    headerContainerStyle?: StyleProp<ViewStyle>;
 };
 
 function getInitialCurrentDateView(value: Date | string, minDate: Date, maxDate: Date) {
@@ -56,6 +60,7 @@ function CalendarPicker({
     onSelected,
     DayComponent = Day,
     selectableDates,
+    headerContainerStyle,
 }: CalendarPickerProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -104,11 +109,9 @@ function CalendarPicker({
      * @param day - The day of the month that was selected.
      */
     const onDayPressed = (day: number) => {
-        setCurrentDateView((prev) => {
-            const newCurrentDateView = setDate(new Date(prev), day);
-            onSelected?.(format(new Date(newCurrentDateView), CONST.DATE.FNS_FORMAT_STRING));
-            return newCurrentDateView;
-        });
+        const newCurrentDateView = setDate(new Date(currentDateView), day);
+        setCurrentDateView(newCurrentDateView);
+        onSelected?.(format(newCurrentDateView, CONST.DATE.FNS_FORMAT_STRING));
     };
 
     /**
@@ -175,13 +178,19 @@ function CalendarPicker({
 
     const webOnlyMarginStyle = isSmallScreenWidth ? {} : styles.mh1;
     const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle];
+    const headerPaddingStyle = headerContainerStyle ?? themeStyles.ph5;
+    // On mobile (isSmallScreenWidth is always true on native), the height animation is skipped
+    // so using Animated.View is unnecessary. Using a plain View avoids activating Reanimated's
+    // Fabric commit hook, which can interfere with React's reconciliation of child view styles
+    // on Android and prevent day-selection background changes from painting.
+    const CalendarBody = isSmallScreenWidth ? View : Animated.View;
 
     const getAccessibilityState = useCallback((isSelected: boolean) => ({selected: isSelected}), []);
 
     return (
         <View style={[themeStyles.pb4]}>
             <View
-                style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, themeStyles.ph5]}
+                style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, headerPaddingStyle]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
                 <PressableWithFeedback
@@ -255,7 +264,7 @@ function CalendarPicker({
                     </View>
                 ))}
             </View>
-            <Animated.View style={calendarContainerStyle}>
+            <CalendarBody style={calendarContainerStyle}>
                 {calendarDaysMatrix?.map((week) => (
                     <View
                         key={`week-${week.toString()}`}
@@ -311,7 +320,7 @@ function CalendarPicker({
                         })}
                     </View>
                 ))}
-            </Animated.View>
+            </CalendarBody>
             <YearPickerModal
                 isVisible={isYearPickerVisible}
                 years={years}
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 4993720b22f0b..db61331d4a1ba 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -1,12 +1,15 @@
-import React, {useImperativeHandle, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
 import Button from '@components/Button';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScrollView from '@components/ScrollView';
 import type {SearchDatePreset} from '@components/Search/types';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
+import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue, getEmptyDateValues} from '@libs/SearchQueryUtils';
+import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from './DatePresetFilterBase';
 import DatePresetFilterBase from './DatePresetFilterBase';
@@ -14,7 +17,7 @@ import DatePresetFilterBase from './DatePresetFilterBase';
 type DateFilterBaseHandle = {
     /** Gets the current date values from the filter */
     getDateValues: () => SearchDateValues;
-    /** Handles back navigation — closes date modifier if open, otherwise calls onBackButtonPress */
+    /** Handles back navigation by closing the active date modifier before leaving the screen */
     goBack: () => void;
 };
 
@@ -33,17 +36,17 @@ type DateFilterBaseProps = {
     onSubmit: (values: SearchDateValues) => void;
     /** Callback when a date value changes (e.g. preset click or calendar save) */
     onDateValuesChange?: (values: SearchDateValues) => void;
-    /** Callback when the date modifier screen is opened or closed (on/after/before) */
+    /** Callback when the date modifier screen is opened or closed (on/after/before/range) */
     onDateModifierChange?: (isOpen: boolean) => void;
-    /** If true, the Reset/Save buttons are only shown when a date modifier (On/After/Before) is selected. Defaults to false (always show buttons). */
+    /** If true, the Reset/Save buttons are only shown when a date modifier is selected. */
     shouldShowButtonsOnlyWithDateModifier?: boolean;
-    /** Whether to render the built-in HeaderWithBackButton. Defaults to true. Set to false when the parent provides its own header. */
+    /** Whether to render the built-in HeaderWithBackButton. Defaults to true. */
     shouldShowHeader?: boolean;
     /** The ref handle */
     ref?: React.Ref<DateFilterBaseHandle>;
 };
 
-// Component uses ref as a prop, which is supported in modern React
+// Component uses ref as a prop, which is supported in modern React.
 function DateFilterBase({
     title,
     defaultDateValues,
@@ -60,85 +63,114 @@ function DateFilterBase({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const normalizedDefaultDateValues = useMemo(() => ({...getEmptyDateValues(), ...defaultDateValues}), [defaultDateValues]);
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
+    const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
+    const [rangeDisplayText, setRangeDisplayText] = useState(() =>
+        getDateRangeDisplayValueFromFormValue(
+            normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+            normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+            normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+        ),
+    );
 
-    const handleSelectDateModifier = (dateModifier: SearchDateModifier | null) => {
-        setSelectedDateModifier(dateModifier);
-        onDateModifierChange?.(!!dateModifier);
-        if (onDateValuesChange) {
-            const values = searchDatePresetFilterBaseRef.current?.getDateValues() ?? {
-                [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-            };
-            onDateValuesChange(values);
-        }
-    };
+    useEffect(() => {
+        setRangeDisplayText(
+            getDateRangeDisplayValueFromFormValue(
+                normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+                normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+                normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+            ),
+        );
+    }, [normalizedDefaultDateValues]);
+
+    const handleDateValuesChange = useCallback(
+        (values: SearchDateValues) => {
+            setRangeDisplayText(
+                getDateRangeDisplayValueFromFormValue(values[CONST.SEARCH.DATE_MODIFIERS.RANGE], values[CONST.SEARCH.DATE_MODIFIERS.AFTER], values[CONST.SEARCH.DATE_MODIFIERS.BEFORE]),
+            );
+            onDateValuesChange?.(values);
+        },
+        [onDateValuesChange],
+    );
 
-    const goBack = () => {
+    const handleSelectDateModifier = useCallback(
+        (dateModifier: SearchDateModifier | null) => {
+            setSelectedDateModifier(dateModifier);
+            onDateModifierChange?.(!!dateModifier);
+            onDateValuesChange?.(searchDatePresetFilterBaseRef.current?.getDateValues() ?? getEmptyDateValues());
+        },
+        [onDateModifierChange, onDateValuesChange],
+    );
+
+    const goBack = useCallback(() => {
         if (selectedDateModifier) {
+            if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                searchDatePresetFilterBaseRef.current?.restoreRangeToEntrySnapshot();
+            }
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             onDateModifierChange?.(false);
             return;
         }
 
         onBackButtonPress?.();
-    };
-
-    useImperativeHandle(ref, () => ({
-        getDateValues: () =>
-            searchDatePresetFilterBaseRef.current?.getDateValues() ?? {
-                [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-            },
-        goBack,
-    }));
-
-    function getComputedTitle() {
-        if (selectedDateModifier) {
-            return translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`);
-        }
+    }, [onBackButtonPress, onDateModifierChange, selectedDateModifier]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            getDateValues: () => searchDatePresetFilterBaseRef.current?.getDateValues() ?? getEmptyDateValues(),
+            goBack,
+        }),
+        [goBack],
+    );
 
-        return title;
-    }
+    const computedTitle = getDateModifierTitle(selectedDateModifier, title ?? '', translate);
 
-    const reset = () => {
+    const reset = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
             return;
         }
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            setSelectedDateModifier(null);
-            onDateModifierChange?.(false);
+            setShouldShowRangeError(false);
             return;
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
-    };
+        setShouldShowRangeError(false);
+    }, [selectedDateModifier]);
 
-    const save = () => {
+    const save = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
             return;
         }
 
         if (selectedDateModifier) {
+            if (!searchDatePresetFilterBaseRef.current.validate()) {
+                return;
+            }
+
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             onDateModifierChange?.(false);
+            onSubmit(dateValues);
             return;
         }
 
-        const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-        onSubmit(dateValues);
-    };
+        onSubmit(searchDatePresetFilterBaseRef.current.getDateValues());
+    }, [onDateModifierChange, onSubmit, selectedDateModifier]);
 
-    const computedTitle = getComputedTitle();
+    const shouldShowActionButtons = !shouldShowButtonsOnlyWithDateModifier || !!selectedDateModifier;
+    const shouldShowRangeSummary = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && !!rangeDisplayText;
 
-    const content = (
-        <>
+    return (
+        <View style={styles.flex1}>
             {shouldShowHeader && (
                 <HeaderWithBackButton
                     title={computedTitle}
@@ -148,15 +180,24 @@ function DateFilterBase({
             <ScrollView contentContainerStyle={[styles.flexGrow1]}>
                 <DatePresetFilterBase
                     ref={searchDatePresetFilterBaseRef}
-                    defaultDateValues={defaultDateValues}
+                    defaultDateValues={normalizedDefaultDateValues}
                     selectedDateModifier={selectedDateModifier}
                     onSelectDateModifier={handleSelectDateModifier}
                     presets={presets}
                     isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
-                    onDateValueChange={onDateValuesChange}
+                    shouldShowRangeError={shouldShowRangeError}
+                    onDateValuesChange={handleDateValuesChange}
+                    onRangeValidationErrorChange={setShouldShowRangeError}
+                    forceVerticalCalendars
                 />
+                {shouldShowRangeSummary && (
+                    <Text style={[styles.textLabelSupporting, styles.mh5, styles.mt2]}>
+                        {`${translate('common.range')}: `}
+                        <Text style={[styles.textLabel]}>{rangeDisplayText}</Text>
+                    </Text>
+                )}
             </ScrollView>
-            {(!shouldShowButtonsOnlyWithDateModifier || !!selectedDateModifier) && (
+            {shouldShowActionButtons && (
                 <>
                     <Button
                         text={translate('common.reset')}
@@ -172,10 +213,8 @@ function DateFilterBase({
                     />
                 </>
             )}
-        </>
+        </View>
     );
-
-    return content;
 }
 
 export type {DateFilterBaseHandle};
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 08922e8a98f38..ea7e2001c9ac5 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useImperativeHandle, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {Ref} from 'react';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
 import MenuItem from '@components/MenuItem';
@@ -9,16 +9,55 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
-import type {SearchDateModifier} from '@libs/SearchUIUtils';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue, getEmptyDateValues, getRangeBoundariesFromFormValue, getRangeQueryValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
+import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
+import RangeDatePicker from './RangeDatePicker';
 
-type SearchDateValues = Record<SearchDateModifier, string | undefined>;
+type CustomDateModifier = Exclude<SearchDateModifier, typeof CONST.SEARCH.DATE_MODIFIERS.RANGE>;
+
+const normalizeDateValues = (dateValues: Partial<SearchDateValues> | SearchDateValues): SearchDateValues => ({
+    ...getEmptyDateValues(),
+    ...dateValues,
+});
+
+const getExclusiveDateValues = (dateModifier: SearchDateModifier, value: string | undefined): SearchDateValues => {
+    const exclusiveValues = getEmptyDateValues();
+    exclusiveValues[dateModifier] = value;
+    return exclusiveValues;
+};
+
+function getCustomDateModifierFromDateValues(dateValues: SearchDateValues): CustomDateModifier {
+    const onValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
+
+    if (onValue && !isSearchDatePreset(onValue)) {
+        return CONST.SEARCH.DATE_MODIFIERS.ON;
+    }
+
+    if (dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) {
+        return CONST.SEARCH.DATE_MODIFIERS.BEFORE;
+    }
+
+    if (dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]) {
+        return CONST.SEARCH.DATE_MODIFIERS.AFTER;
+    }
+
+    // Default to `On` when no custom date values are set and the custom date page is opened.
+    return CONST.SEARCH.DATE_MODIFIERS.ON;
+}
+
+function isCustomDateModifier(dateModifier: SearchDateModifier | null): dateModifier is CustomDateModifier {
+    return !!dateModifier && dateModifier !== CONST.SEARCH.DATE_MODIFIERS.RANGE;
+}
 
 type DatePresetFilterBaseHandle = {
     /** Gets date values */
     getDateValues: () => SearchDateValues;
 
+    /** Gets the formatted range display text for current date values */
+    getRangeDisplayText: () => string;
+
     /** Clears date values */
     clearDateValues: () => void;
 
@@ -27,6 +66,15 @@ type DatePresetFilterBaseHandle = {
 
     /** Clears the date value of the selected date modifier */
     clearDateValueOfSelectedDateModifier: () => void;
+
+    /** Restores the Range value to what it was when Range mode was entered, discarding any unsaved ephemeral picks */
+    restoreRangeToEntrySnapshot: () => void;
+
+    /** Resets date values to the provided defaults */
+    resetDateValuesToDefault: () => void;
+
+    /** Validates the selected date modifier input */
+    validate: () => boolean;
 };
 
 type DatePresetFilterBaseProps = {
@@ -45,8 +93,20 @@ type DatePresetFilterBaseProps = {
     /** Whether the search advanced filters form Onyx data is loading or not */
     isSearchAdvancedFiltersFormLoading?: boolean;
 
-    /** Callback when a date value changes (e.g. preset click or calendar save) */
-    onDateValueChange?: (values: SearchDateValues) => void;
+    /** Whether to show the range validation error */
+    shouldShowRangeError?: boolean;
+
+    /** Callback when date values change */
+    onDateValuesChange?: (dateValues: SearchDateValues) => void;
+
+    /** Backward-compatible alias for onDateValuesChange */
+    onDateValueChange?: (dateValues: SearchDateValues) => void;
+
+    /** Callback when range validation error changes */
+    onRangeValidationErrorChange?: (shouldShowRangeError: boolean) => void;
+
+    /** Force vertical stacking of calendars in range picker */
+    forceVerticalCalendars?: boolean;
 
     /** The ref handle */
     ref: Ref<DatePresetFilterBaseHandle>;
@@ -55,12 +115,9 @@ type DatePresetFilterBaseProps = {
 /**
  * SearchDatePresetFilterBase is a partially controlled component:
  * - The selected date modifier is controlled.
- * - The date values are uncontrolled. This is done to avoid duplicating the `setDateValue` logic and also to avoid exposing the `ephemeralDateValue` state.
+ * - The date values are uncontrolled. This avoids duplicating the setDateValue logic and exposing ephemeral picker state.
  *
- * There are cases where the parent is required to alter the internal date values e.g. reset the values, in such cases you should use the ref handle.
- * Typically you are expected to use this component with a save and a reset button.
- * - On save: if a date modifier is selected (i.e. user clicked save at the calendar picker) you should `setDateValueOfSelectedDateModifier` otherwise `getDateValues`
- * - On reset: if a date modifier is selected (i.e. user clicked reset at the calendar picker) you should `clearDateValueOfSelectedDateModifier` otherwise `clearDateValues`
+ * There are cases where the parent is required to alter the internal date values, e.g. reset values. In those cases, use the ref handle.
  */
 function DatePresetFilterBase({
     defaultDateValues,
@@ -68,7 +125,11 @@ function DatePresetFilterBase({
     onSelectDateModifier,
     presets,
     isSearchAdvancedFiltersFormLoading,
+    shouldShowRangeError = false,
+    onDateValuesChange,
     onDateValueChange,
+    onRangeValidationErrorChange,
+    forceVerticalCalendars = false,
     ref,
 }: DatePresetFilterBaseProps) {
     const theme = useTheme();
@@ -77,45 +138,101 @@ function DatePresetFilterBase({
     const {translate} = useLocalize();
 
     const shouldShowHorizontalRule = !!presets?.length;
+    const customDateTitle = translate('search.filters.date.customDate');
+    const customRangeTitle = translate('search.filters.date.customRange');
+    const normalizedDefaultDateValues = useMemo(() => normalizeDateValues(defaultDateValues), [defaultDateValues]);
+
+    const getRangeDisplayTextFromDateValues = useCallback((dateValues: SearchDateValues) => {
+        const rangeValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+        if (!rangeValue) {
+            return '';
+        }
+        return getDateRangeDisplayValueFromFormValue(rangeValue, dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER], dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
+    }, []);
+
+    const getRangeEphemeralValuesFromDateValues = useCallback((dateValues: SearchDateValues) => {
+        const rangeBoundaries = getRangeBoundariesFromFormValue(dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]);
+
+        return {
+            from: rangeBoundaries.from,
+            to: rangeBoundaries.to,
+        };
+    }, []);
 
-    const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);
+    const notifyDateValuesChange = useCallback(
+        (values: SearchDateValues) => {
+            onDateValuesChange?.(values);
+            onDateValueChange?.(values);
+        },
+        [onDateValueChange, onDateValuesChange],
+    );
+
+    const [dateValues, setDateValues] = useState<SearchDateValues>(normalizedDefaultDateValues);
+    const dateValuesRef = useRef<SearchDateValues>(normalizedDefaultDateValues);
+    const updateDateValues = useCallback(
+        (updater: SearchDateValues | ((prevDateValues: SearchDateValues) => SearchDateValues), shouldNotify = true) => {
+            const nextDateValues = typeof updater === 'function' ? updater(dateValuesRef.current) : updater;
+            dateValuesRef.current = nextDateValues;
+            setDateValues(nextDateValues);
+
+            if (shouldNotify) {
+                notifyDateValuesChange(nextDateValues);
+            }
+        },
+        [notifyDateValuesChange],
+    );
 
     useEffect(() => {
         if (isSearchAdvancedFiltersFormLoading) {
             return;
         }
-        setDateValues(defaultDateValues);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isSearchAdvancedFiltersFormLoading]);
+
+        const currentDateValues = dateValuesRef.current;
+        const hasDefaultValuesChanged =
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.ON] !== normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.ON] ||
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] !== normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ||
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] !== normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ||
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] !== normalizedDefaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+
+        if (!hasDefaultValuesChanged) {
+            return;
+        }
+
+        dateValuesRef.current = normalizedDefaultDateValues;
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setDateValues(normalizedDefaultDateValues);
+    }, [isSearchAdvancedFiltersFormLoading, normalizedDefaultDateValues]);
 
     const setDateValue = useCallback(
         (dateModifier: SearchDateModifier, value: string | undefined) => {
-            setDateValues((prevDateValues) => {
-                let newValues: SearchDateValues;
-
+            updateDateValues((prevDateValues) => {
                 if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
-                    newValues = {
-                        [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
-                        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                    };
-                } else if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
-                    newValues = {
+                    return getExclusiveDateValues(dateModifier, value);
+                }
+
+                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    return {...prevDateValues, [dateModifier]: value};
+                }
+
+                if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
+                    return {
                         ...prevDateValues,
                         [dateModifier]: value,
                         [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
                     };
-                } else {
-                    newValues = {...prevDateValues, [dateModifier]: value};
                 }
 
-                // Call the callback immediately with the new values so parents don't need to depend on async state updates or refs
-                onDateValueChange?.(newValues);
-
-                return newValues;
+                return {...prevDateValues, [dateModifier]: value};
             });
         },
-        [onDateValueChange],
+        [updateDateValues],
+    );
+
+    const setExclusiveDateValue = useCallback(
+        (dateModifier: SearchDateModifier, value: string | undefined) => {
+            updateDateValues(getExclusiveDateValues(dateModifier, value));
+        },
+        [updateDateValues],
     );
 
     const dateDisplayValues = useMemo<SearchDateValues>(() => {
@@ -128,6 +245,7 @@ function DatePresetFilterBase({
             [CONST.SEARCH.DATE_MODIFIERS.ON]: isSearchDatePreset(dateOn) ? undefined : dateOn,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfter,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBefore,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ? 'range' : undefined,
         };
     }, [dateValues]);
 
@@ -138,23 +256,78 @@ function DatePresetFilterBase({
         [getInitialEphemeralDateValue],
     );
 
+    const [rangeEphemeralValues, setRangeEphemeralValues] = useState<{from?: string; to?: string}>(() => getRangeEphemeralValuesFromDateValues(normalizedDefaultDateValues));
+
+    // Synchronize dateValues when rangeEphemeralValues change, keeping the side effect
+    // out of the setRangeEphemeralValues state updater to avoid unpredictable batching on Android.
+    useEffect(() => {
+        if (selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            return;
+        }
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, getRangeQueryValue(rangeEphemeralValues.from, rangeEphemeralValues.to) || undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rangeEphemeralValues.from, rangeEphemeralValues.to]);
+
+    // Used to discard unsaved range picks when the user leaves Range mode without saving.
+    const rangeEntrySnapshotRef = useRef<string | undefined>(undefined);
+
     const selectDateModifier = useCallback(
         (dateModifier: SearchDateModifier | null) => {
-            resetEphemeralDateValue(dateModifier);
+            const isSwitchingBetweenCustomDateModifiers = isCustomDateModifier(selectedDateModifier) && isCustomDateModifier(dateModifier);
+            if (!isSwitchingBetweenCustomDateModifiers) {
+                resetEphemeralDateValue(dateModifier);
+            }
+
+            onRangeValidationErrorChange?.(false);
+
+            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                const currentDateValues = dateValuesRef.current;
+                rangeEntrySnapshotRef.current = currentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+                setRangeEphemeralValues(getRangeEphemeralValuesFromDateValues(currentDateValues));
+            }
+
             onSelectDateModifier(dateModifier);
         },
-        [resetEphemeralDateValue, onSelectDateModifier],
+        [getRangeEphemeralValuesFromDateValues, onRangeValidationErrorChange, onSelectDateModifier, resetEphemeralDateValue, selectedDateModifier],
     );
 
+    const validate = useCallback(() => {
+        if (selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            onRangeValidationErrorChange?.(false);
+            return true;
+        }
+
+        const isValid = !!(rangeEphemeralValues.from && rangeEphemeralValues.to);
+        onRangeValidationErrorChange?.(!isValid);
+        return isValid;
+    }, [onRangeValidationErrorChange, rangeEphemeralValues.from, rangeEphemeralValues.to, selectedDateModifier]);
+
     useImperativeHandle(
         ref,
         () => ({
             getDateValues() {
-                return dateValues;
+                return dateValuesRef.current;
+            },
+
+            getRangeDisplayText() {
+                return getRangeDisplayTextFromDateValues(dateValuesRef.current);
+            },
+
+            resetDateValuesToDefault() {
+                updateDateValues(normalizedDefaultDateValues);
+                onRangeValidationErrorChange?.(false);
+            },
+
+            validate() {
+                return validate();
             },
 
             clearDateValues() {
-                setDateValues({[CONST.SEARCH.DATE_MODIFIERS.ON]: undefined, [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined, [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined});
+                updateDateValues(getEmptyDateValues());
+                setEphemeralDateValue(undefined);
+                setRangeEphemeralValues({});
+                onRangeValidationErrorChange?.(false);
             },
 
             setDateValueOfSelectedDateModifier() {
@@ -162,7 +335,9 @@ function DatePresetFilterBase({
                     return;
                 }
 
-                setDateValue(selectedDateModifier, ephemeralDateValue);
+                const updatedValue =
+                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE ? getRangeQueryValue(rangeEphemeralValues.from, rangeEphemeralValues.to) || undefined : ephemeralDateValue;
+                updateDateValues(getExclusiveDateValues(selectedDateModifier, updatedValue));
             },
 
             clearDateValueOfSelectedDateModifier() {
@@ -170,63 +345,143 @@ function DatePresetFilterBase({
                     return;
                 }
 
-                setDateValue(selectedDateModifier, undefined);
+                const currentDateValues = dateValuesRef.current;
+                updateDateValues({...currentDateValues, [selectedDateModifier]: undefined});
+
+                if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    setRangeEphemeralValues({});
+                } else {
+                    setEphemeralDateValue(undefined);
+                }
+
+                onRangeValidationErrorChange?.(false);
+            },
+
+            restoreRangeToEntrySnapshot() {
+                const updatedValues = {
+                    ...dateValuesRef.current,
+                    [CONST.SEARCH.DATE_MODIFIERS.RANGE]: rangeEntrySnapshotRef.current,
+                };
+
+                updateDateValues(updatedValues);
+                setRangeEphemeralValues(getRangeEphemeralValuesFromDateValues(updatedValues));
+                onRangeValidationErrorChange?.(false);
             },
         }),
-        [selectedDateModifier, dateValues, ephemeralDateValue, setDateValue],
+        [
+            ephemeralDateValue,
+            getRangeDisplayTextFromDateValues,
+            getRangeEphemeralValuesFromDateValues,
+            normalizedDefaultDateValues,
+            onRangeValidationErrorChange,
+            rangeEphemeralValues.from,
+            rangeEphemeralValues.to,
+            selectedDateModifier,
+            updateDateValues,
+            validate,
+        ],
     );
 
-    return !selectedDateModifier ? (
+    const rangeDescription = getRangeDisplayTextFromDateValues(dateValues) || undefined;
+    const customDateModifier = useMemo(() => getCustomDateModifierFromDateValues(dateValues), [dateValues]);
+
+    const customDateDescription = useMemo(() => {
+        const customDateValue = dateDisplayValues[customDateModifier];
+        if (!customDateValue) {
+            return undefined;
+        }
+
+        return `${translate(`common.${customDateModifier.toLowerCase() as SearchDateModifierLower}`)} ${customDateValue}`;
+    }, [customDateModifier, dateDisplayValues, translate]);
+    const handleSingleDateSelected = useCallback((date: string) => {
+        setEphemeralDateValue(date);
+    }, []);
+    const selectCustomDateMode = useCallback(() => selectDateModifier(customDateModifier), [customDateModifier, selectDateModifier]);
+
+    if (!selectedDateModifier) {
+        return (
+            <>
+                {presets?.map((preset) => (
+                    <SingleSelectListItem
+                        key={preset}
+                        showTooltip
+                        item={{
+                            text: translate(`search.filters.date.presets.${preset}`),
+                            isSelected: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] === preset,
+                        }}
+                        onSelectRow={() => setExclusiveDateValue(CONST.SEARCH.DATE_MODIFIERS.ON, preset)}
+                        wrapperStyle={styles.flexReset}
+                    />
+                ))}
+                {shouldShowHorizontalRule && (
+                    <SpacerView
+                        shouldShow
+                        style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
+                    />
+                )}
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={customDateTitle}
+                    description={customDateDescription}
+                    onPress={selectCustomDateMode}
+                />
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={customRangeTitle}
+                    description={rangeDescription}
+                    onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE)}
+                />
+            </>
+        );
+    }
+
+    if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+        return (
+            <RangeDatePicker
+                fromValue={rangeEphemeralValues.from}
+                toValue={rangeEphemeralValues.to}
+                onFromSelected={(date) => {
+                    setRangeEphemeralValues((prev) => ({...prev, from: date}));
+                }}
+                onToSelected={(date) => {
+                    setRangeEphemeralValues((prev) => ({...prev, to: date}));
+                }}
+                shouldShowError={shouldShowRangeError}
+                forceVertical={forceVerticalCalendars}
+            />
+        );
+    }
+
+    return (
         <>
-            {presets?.map((preset) => (
+            <CalendarPicker
+                value={ephemeralDateValue}
+                onSelected={handleSingleDateSelected}
+                minDate={CONST.CALENDAR_PICKER.MIN_DATE}
+                maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+            />
+            <SpacerView
+                shouldShow
+                style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
+            />
+            {CONST.SEARCH.CUSTOM_DATE_MODIFIERS.map((dateModifier) => (
                 <SingleSelectListItem
-                    key={preset}
+                    key={dateModifier}
                     showTooltip
                     item={{
-                        text: translate(`search.filters.date.presets.${preset}`),
-                        isSelected: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] === preset,
+                        text: translate(`common.${dateModifier.toLowerCase() as SearchDateModifierLower}`),
+                        isSelected: selectedDateModifier === dateModifier,
                     }}
-                    onSelectRow={() => setDateValue(CONST.SEARCH.DATE_MODIFIERS.ON, preset)}
+                    onSelectRow={() => selectDateModifier(dateModifier)}
                     wrapperStyle={styles.flexReset}
                 />
             ))}
-            {shouldShowHorizontalRule && (
-                <SpacerView
-                    shouldShow
-                    style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
-                />
-            )}
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.on')}
-                description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.ON]}
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.ON)}
-            />
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.after')}
-                description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.AFTER)}
-            />
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.before')}
-                description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.BEFORE)}
-            />
         </>
-    ) : (
-        <CalendarPicker
-            value={ephemeralDateValue}
-            onSelected={setEphemeralDateValue}
-            minDate={CONST.CALENDAR_PICKER.MIN_DATE}
-            maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
-        />
     );
 }
 
 export type {SearchDateValues, DatePresetFilterBaseHandle as SearchDatePresetFilterBaseHandle};
+
 export default DatePresetFilterBase;
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
new file mode 100644
index 0000000000000..2ce8dea4f29c5
--- /dev/null
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import {View} from 'react-native';
+import CalendarPicker from '@components/DatePicker/CalendarPicker';
+import FormHelpMessage from '@components/FormHelpMessage';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type RangeDatePickerProps = {
+    /** The "From" date value */
+    fromValue?: string;
+
+    /** The "To" date value */
+    toValue?: string;
+
+    /** Callback when "From" date is selected */
+    onFromSelected: (date: string) => void;
+
+    /** Callback when "To" date is selected */
+    onToSelected: (date: string) => void;
+
+    /** Whether to show validation error */
+    shouldShowError?: boolean;
+
+    /** Force vertical stacking of calendars */
+    forceVertical?: boolean;
+};
+
+function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shouldShowError = false, forceVertical = false}: RangeDatePickerProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const shouldStack = forceVertical || isSmallScreenWidth;
+    const fromMaxDate = toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE;
+    const toMinDate = fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE;
+
+    return (
+        <>
+            <View style={[!shouldStack && styles.flexRow, !shouldStack && styles.alignItemsStretch, styles.mh5, isSmallScreenWidth && styles.mt3]}>
+                <View style={[!shouldStack && styles.flex1, !shouldStack && styles.mr2]}>
+                    <View style={[styles.borderedContentCard, !shouldStack && styles.flex1]}>
+                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.from')}</Text>
+                        <CalendarPicker
+                            value={fromValue}
+                            onSelected={onFromSelected}
+                            minDate={CONST.CALENDAR_PICKER.MIN_DATE}
+                            maxDate={fromMaxDate}
+                            headerContainerStyle={styles.ph4}
+                        />
+                    </View>
+                </View>
+
+                <View style={[!shouldStack && styles.flex1, !shouldStack && styles.ml2, shouldStack && styles.mt4]}>
+                    <View style={[styles.borderedContentCard, !shouldStack && styles.flex1]}>
+                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.to')}</Text>
+                        <CalendarPicker
+                            value={toValue}
+                            onSelected={onToSelected}
+                            minDate={toMinDate}
+                            maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                            headerContainerStyle={styles.ph4}
+                        />
+                    </View>
+                </View>
+            </View>
+
+            {shouldShowError && (
+                <FormHelpMessage
+                    isError
+                    message={translate('search.errors.pleaseSelectDatesForBothFromAndTo')}
+                    style={[styles.mh5, styles.mt2]}
+                />
+            )}
+        </>
+    );
+}
+
+export default RangeDatePicker;
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 626c381eba5af..f67be4f1f5df2 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -1,15 +1,22 @@
-import React, {useCallback, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ScrollView from '@components/ScrollView';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePreset} from '@components/Search/types';
 import Text from '@components/Text';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
+import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 
 type DateSelectPopupProps = {
@@ -27,16 +34,139 @@ type DateSelectPopupProps = {
 
     /** Function to call to close the overlay when changes are applied */
     closeOverlay: () => void;
+
+    /** Function to set the popover width dynamically */
+    setPopoverWidth?: (width: number | undefined) => void;
+};
+
+type SelectedDateModifierHeaderProps = {
+    isCompact: boolean;
+    title: string;
+    onBackPress: () => void;
+};
+
+function SelectedDateModifierHeader({isCompact, title, onBackPress}: SelectedDateModifierHeaderProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const backArrowIcon = useMemoizedLazyExpensifyIcons(['BackArrow']);
+    const {translate} = useLocalize();
+
+    if (isCompact) {
+        return (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
+                <PressableWithoutFeedback
+                    onPress={onBackPress}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('common.back')}
+                    sentryLabel="DateSelectPopup-Back"
+                >
+                    <Icon
+                        src={backArrowIcon.BackArrow}
+                        fill={theme.icon}
+                    />
+                </PressableWithoutFeedback>
+                <Text style={[styles.textLabelSupporting]}>{title}</Text>
+            </View>
+        );
+    }
+
+    return (
+        <HeaderWithBackButton
+            shouldDisplayHelpButton={false}
+            style={[styles.h10, styles.pb3]}
+            subtitle={title}
+            onBackButtonPress={onBackPress}
+        />
+    );
+}
+
+type ActionButtonsProps = {
+    containerStyle: React.ComponentProps<typeof View>['style'];
+    resetSentryLabel?: string;
+    applySentryLabel?: string;
+    onReset: () => void;
+    onApply: () => void;
 };
 
-function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSelectPopupProps) {
+function ActionButtons({containerStyle, resetSentryLabel, applySentryLabel, onReset, onApply}: ActionButtonsProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <View style={containerStyle}>
+            <Button
+                medium
+                style={[styles.flex1]}
+                text={translate('common.reset')}
+                onPress={onReset}
+                sentryLabel={resetSentryLabel}
+            />
+            <Button
+                success
+                medium
+                style={[styles.flex1]}
+                text={translate('common.apply')}
+                onPress={onApply}
+                sentryLabel={applySentryLabel}
+            />
+        </View>
+    );
+}
+
+function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopoverWidth}: DateSelectPopupProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {windowHeight} = useWindowDimensions();
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
+    const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
+    const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
+    const [rangeText, setRangeText] = useState(() =>
+        getDateRangeDisplayValueFromFormValue(value[CONST.SEARCH.DATE_MODIFIERS.RANGE], value[CONST.SEARCH.DATE_MODIFIERS.AFTER], value[CONST.SEARCH.DATE_MODIFIERS.BEFORE]),
+    );
+    const syncedRangeText = useMemo(
+        () => getDateRangeDisplayValueFromFormValue(value[CONST.SEARCH.DATE_MODIFIERS.RANGE], value[CONST.SEARCH.DATE_MODIFIERS.AFTER], value[CONST.SEARCH.DATE_MODIFIERS.BEFORE]),
+        [value],
+    );
+    const displayedRangeText = selectedDateModifier ? rangeText : syncedRangeText;
+    const selectedDateModifierTitle = getDateModifierTitle(selectedDateModifier, '', translate);
+
+    const updateRangeText = useCallback(() => {
+        setRangeText(searchDatePresetFilterBaseRef.current?.getRangeDisplayText() ?? '');
+    }, []);
+
+    // Widen the popover when Range is selected, reset when not
+    useEffect(() => {
+        if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            setPopoverWidth?.(CONST.POPOVER_DATE_WIDTH);
+        } else {
+            setPopoverWidth?.(undefined);
+        }
+    }, [selectedDateModifier, setPopoverWidth]);
+
+    useLayoutEffect(() => {
+        if (!shouldShowRangeError || selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            return;
+        }
+
+        scrollViewRef.current?.scrollToEnd({animated: true});
+    }, [selectedDateModifier, shouldShowRangeError]);
+
+    const clearSelection = useCallback(() => {
+        setSelectedDateModifier(null);
+        setShouldShowRangeError(false);
+    }, []);
+
+    const handleBackPress = useCallback(() => {
+        if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            searchDatePresetFilterBaseRef.current.restoreRangeToEntrySnapshot();
+            updateRangeText();
+        }
+        clearSelection();
+    }, [clearSelection, selectedDateModifier, updateRangeText]);
 
     const applyChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -44,8 +174,13 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSe
         }
 
         if (selectedDateModifier) {
+            if (!searchDatePresetFilterBaseRef.current.validate()) {
+                return;
+            }
+
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            setSelectedDateModifier(null);
+            onChange(searchDatePresetFilterBaseRef.current.getDateValues());
+            closeOverlay();
             return;
         }
 
@@ -61,29 +196,87 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSe
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            setSelectedDateModifier(null);
+            updateRangeText();
+            setShouldShowRangeError(false);
             return;
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
-        onChange({
-            [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-        });
+        setRangeText('');
+        setShouldShowRangeError(false);
+        onChange(searchDatePresetFilterBaseRef.current.getDateValues());
         closeOverlay();
-    }, [closeOverlay, onChange, selectedDateModifier]);
+    }, [closeOverlay, onChange, selectedDateModifier, updateRangeText]);
+
+    const maxPopupHeight = Math.round(windowHeight * 0.875);
+
+    // For non-Range modes, use original simple styles. For Range, use custom layout
+    const useRangeLayout = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
+
+    if (!isSmallScreenWidth) {
+        return (
+            <View style={[styles.pv4, styles.gap2]}>
+                <View>
+                    {!!selectedDateModifier && (
+                        <SelectedDateModifierHeader
+                            isCompact={false}
+                            title={selectedDateModifierTitle}
+                            onBackPress={handleBackPress}
+                        />
+                    )}
+                    <DatePresetFilterBase
+                        ref={searchDatePresetFilterBaseRef}
+                        defaultDateValues={value}
+                        selectedDateModifier={selectedDateModifier}
+                        onSelectDateModifier={setSelectedDateModifier}
+                        presets={presets}
+                        shouldShowRangeError={shouldShowRangeError}
+                        onDateValuesChange={updateRangeText}
+                        onRangeValidationErrorChange={setShouldShowRangeError}
+                    />
+                </View>
+                <View style={[styles.flexRow, styles.gap2, useRangeLayout ? styles.mh5 : styles.ph5, useRangeLayout && styles.alignItemsCenter, useRangeLayout && styles.pt1]}>
+                    {useRangeLayout && (
+                        <View style={[styles.flex1, styles.mr2]}>
+                            {!!displayedRangeText && (
+                                <Text style={[styles.textLabelSupporting]}>
+                                    {`${translate('common.range')}: `}
+                                    <Text style={[styles.textLabel]}>{displayedRangeText}</Text>
+                                </Text>
+                            )}
+                        </View>
+                    )}
+                    <View style={[styles.flex1, useRangeLayout && styles.ml2]}>
+                        <ActionButtons
+                            containerStyle={[styles.flexRow, styles.gap2]}
+                            onReset={resetChanges}
+                            onApply={applyChanges}
+                        />
+                    </View>
+                </View>
+            </View>
+        );
+    }
+
+    const topPaddingStyle = selectedDateModifier ? styles.pt3 : undefined;
+    const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
+    const mobileContainerStyle = useRangeLayout ? [topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}] : styles.gap2;
+    const mobileLabelStyle = useRangeLayout ? [styles.textLabel, styles.ph5, styles.pb3] : [styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1];
+    const mobileButtonRowStyle = useRangeLayout ? [styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2] : [styles.flexRow, styles.gap2, styles.ph5];
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-            {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-            <View>
+        <View style={mobileContainerStyle}>
+            {!selectedDateModifier && <Text style={mobileLabelStyle}>{label}</Text>}
+            <ScrollView
+                ref={scrollViewRef}
+                style={useRangeLayout ? [styles.flexGrow1] : undefined}
+                contentContainerStyle={useRangeLayout ? [!selectedDateModifier && styles.pt4, selectedDateModifier && styles.pt0] : undefined}
+            >
                 {!!selectedDateModifier && (
-                    <HeaderWithBackButton
-                        shouldDisplayHelpButton={false}
-                        style={[styles.h10, styles.pb3]}
-                        subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                        onBackButtonPress={() => setSelectedDateModifier(null)}
+                    <SelectedDateModifierHeader
+                        isCompact={isSmallScreenWidth && useRangeLayout}
+                        title={selectedDateModifierTitle}
+                        onBackPress={handleBackPress}
                     />
                 )}
                 <DatePresetFilterBase
@@ -92,25 +285,24 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSe
                     selectedDateModifier={selectedDateModifier}
                     onSelectDateModifier={setSelectedDateModifier}
                     presets={presets}
+                    shouldShowRangeError={shouldShowRangeError}
+                    onDateValuesChange={updateRangeText}
+                    onRangeValidationErrorChange={setShouldShowRangeError}
                 />
-            </View>
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_DATE}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_DATE}
-                />
-            </View>
+            </ScrollView>
+            {!!displayedRangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
+                <Text style={[styles.textLabelSupporting, styles.ph5, styles.mt2, styles.textAlignLeft]}>
+                    {`${translate('common.range')}: `}
+                    <Text style={[styles.textLabel]}>{displayedRangeText}</Text>
+                </Text>
+            )}
+            <ActionButtons
+                containerStyle={mobileButtonRowStyle}
+                resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_DATE}
+                applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_DATE}
+                onReset={resetChanges}
+                onApply={applyChanges}
+            />
         </View>
     );
 }
diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx
index f0012ea465e7d..ff4805c64c3f7 100644
--- a/src/components/Search/FilterDropdowns/DropdownButton.tsx
+++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx
@@ -21,6 +21,7 @@ import type WithSentryLabel from '@src/types/utils/SentryLabel';
 
 type PopoverComponentProps = {
     closeOverlay: () => void;
+    setPopoverWidth?: (width: number | undefined) => void;
 };
 
 type DropdownButtonProps = WithSentryLabel & {
@@ -70,6 +71,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
     const triggerRef = useRef<View | null>(null);
     const anchorRef = useRef<View | null>(null);
     const [isOverlayVisible, setIsOverlayVisible] = useState(false);
+    const [customPopoverWidth, setCustomPopoverWidth] = useState<number | undefined>(undefined);
     const {calculatePopoverPosition} = usePopoverPosition();
 
     const [popoverTriggerPosition, setPopoverTriggerPosition] = useState({
@@ -114,15 +116,17 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
         return `${label}: ${selectedItems}`;
     }, [label, value]);
 
+    const actualPopoverWidth = customPopoverWidth ?? CONST.POPOVER_DROPDOWN_WIDTH;
+
     const containerStyles = useMemo(() => {
         if (isSmallScreenWidth) {
             return styles.w100;
         }
-        return {width: CONST.POPOVER_DROPDOWN_WIDTH};
-    }, [isSmallScreenWidth, styles]);
+        return {width: actualPopoverWidth};
+    }, [isSmallScreenWidth, styles, actualPopoverWidth]);
 
     const popoverContent = useMemo(() => {
-        return PopoverComponent({closeOverlay: toggleOverlay});
+        return PopoverComponent({closeOverlay: toggleOverlay, setPopoverWidth: setCustomPopoverWidth});
     }, [PopoverComponent, toggleOverlay]);
 
     return (
@@ -171,7 +175,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
                 shouldCloseWhenBrowserNavigationChanged={false}
                 innerContainerStyle={containerStyles}
                 popoverDimensions={{
-                    width: CONST.POPOVER_DROPDOWN_WIDTH,
+                    width: actualPopoverWidth,
                     height: CONST.POPOVER_DROPDOWN_MIN_HEIGHT,
                 }}
                 shouldSkipRemeasurement
diff --git a/src/components/Search/SearchDatePresetFilterBasePage.tsx b/src/components/Search/SearchDatePresetFilterBasePage.tsx
index cd6fe83002e3c..9255477338256 100644
--- a/src/components/Search/SearchDatePresetFilterBasePage.tsx
+++ b/src/components/Search/SearchDatePresetFilterBasePage.tsx
@@ -5,14 +5,16 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
+import {getDateFilterKeys} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import DateFilterBase from './FilterComponents/DateFilterBase';
-import type {ReportFieldDateKey, SearchDateFilterKeys} from './types';
+import type {SearchDateFilterKeys} from './types';
 
 type SearchDatePresetFilterBasePageProps = {
     /** Key used for the date filter */
@@ -29,27 +31,26 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
 
-    const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
-        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as const);
-
-    const dateBeforeKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX) as ReportFieldDateKey)
-        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as const);
-
-    const dateAfterKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey)
-        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as const);
+    const {dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey} = getDateFilterKeys(dateKey) as {
+        dateOnKey: SearchAdvancedFiltersKey;
+        dateBeforeKey: SearchAdvancedFiltersKey;
+        dateAfterKey: SearchAdvancedFiltersKey;
+        dateRangeKey: SearchAdvancedFiltersKey;
+    };
 
-    const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
-    const dateBeforeValue = searchAdvancedFiltersForm?.[dateBeforeKey];
-    const dateAfterValue = searchAdvancedFiltersForm?.[dateAfterKey];
+    // Dynamic key lookup requires narrowing the form to string-valued fields.
+    const dateFormValues = searchAdvancedFiltersForm as Record<string, string | undefined> | undefined;
+    const dateOnValue = dateFormValues?.[dateOnKey];
+    const dateBeforeValue = dateFormValues?.[dateBeforeKey];
+    const dateAfterValue = dateFormValues?.[dateAfterKey];
+    const dateRangeValue = dateFormValues?.[dateRangeKey];
 
     function getDefaultDateValues() {
         return {
             [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: dateRangeValue,
         };
     }
 
@@ -84,6 +85,7 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
                         [dateOnKey]: values[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
                         [dateBeforeKey]: values[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
                         [dateAfterKey]: values[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
+                        [dateRangeKey]: values[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? null,
                     });
                     Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
                 }}
diff --git a/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx b/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
index 0cb175a9c02ac..b0edc148ab321 100644
--- a/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
+++ b/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
@@ -16,13 +16,14 @@ type DatePickerFilterPopupProps = PopoverComponentProps & {
     updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
-function DatePickerFilterPopup({closeOverlay, filterKey, value, translationKey, updateFilterForm}: DatePickerFilterPopupProps) {
+function DatePickerFilterPopup({closeOverlay, setPopoverWidth, filterKey, value, translationKey, updateFilterForm}: DatePickerFilterPopupProps) {
     const {translate} = useLocalize();
     const onChange = (selectedDates: SearchDateValues) => {
         const dateFormValues: Record<string, string | undefined> = {};
         dateFormValues[`${filterKey}On`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON];
         dateFormValues[`${filterKey}After`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         dateFormValues[`${filterKey}Before`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+        dateFormValues[`${filterKey}Range`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE];
         updateFilterForm(dateFormValues as Partial<SearchAdvancedFiltersForm>);
     };
     return (
@@ -31,6 +32,7 @@ function DatePickerFilterPopup({closeOverlay, filterKey, value, translationKey,
             value={value}
             onChange={onChange}
             closeOverlay={closeOverlay}
+            setPopoverWidth={setPopoverWidth}
             presets={getDatePresets(filterKey, true)}
         />
     );
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 73756b66bcadb..3f453b9a1f9dd 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -28,7 +28,7 @@ import {updateAdvancedFilters} from '@libs/actions/Search';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
-import {buildFilterQueryWithSortDefaults, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {buildFilterQueryWithSortDefaults, getDateRangeDisplayValueFromFormValue, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {
     filterValidHasValues,
     getFeedOptions,
@@ -190,11 +190,12 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const isOptions = Object.values(CONST.SEARCH.IS_VALUES).map((value) => ({text: translate(`common.${value}`), value}));
     const is = isFilterValues ? isOptions.filter((option) => isFilterValues.includes(option.value)) : [];
 
-    const createDateDisplayValue = (filterValues: {on?: string; after?: string; before?: string}): [SearchDateValues, string[]] => {
+    const createDateDisplayValue = (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
         const value: SearchDateValues = {
             [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
         };
 
         const displayText: string[] = [];
@@ -207,6 +208,12 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
         if (value.Before) {
             displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
         }
+        if (value.Range) {
+            const rangeDisplay = getDateRangeDisplayValueFromFormValue(value.Range, undefined, undefined, true);
+            if (rangeDisplay) {
+                displayText.push(rangeDisplay);
+            }
+        }
 
         return [value, displayText];
     };
@@ -215,18 +222,21 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
         on: searchAdvancedFiltersForm.dateOn,
         after: searchAdvancedFiltersForm.dateAfter,
         before: searchAdvancedFiltersForm.dateBefore,
+        range: searchAdvancedFiltersForm.dateRange,
     });
 
     const [posted, displayPosted] = createDateDisplayValue({
         on: searchAdvancedFiltersForm.postedOn,
         after: searchAdvancedFiltersForm.postedAfter,
         before: searchAdvancedFiltersForm.postedBefore,
+        range: searchAdvancedFiltersForm.postedRange,
     });
 
     const [withdrawn, displayWithdrawn] = createDateDisplayValue({
         on: searchAdvancedFiltersForm.withdrawnOn,
         after: searchAdvancedFiltersForm.withdrawnAfter,
         before: searchAdvancedFiltersForm.withdrawnBefore,
+        range: searchAdvancedFiltersForm.withdrawnRange,
     });
 
     const withdrawalTypeOptions = getWithdrawalTypeOptions(translate);
@@ -337,6 +347,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const datePickerComponent = (props: PopoverComponentProps) => (
         <DatePickerFilterPopup
             closeOverlay={props.closeOverlay}
+            setPopoverWidth={props.setPopoverWidth}
             filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE}
             value={date}
             translationKey="common.date"
@@ -347,6 +358,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const postedPickerComponent = (props: PopoverComponentProps) => (
         <DatePickerFilterPopup
             closeOverlay={props.closeOverlay}
+            setPopoverWidth={props.setPopoverWidth}
             filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED}
             value={posted}
             translationKey="search.filters.posted"
@@ -357,6 +369,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const withdrawnPickerComponent = (props: PopoverComponentProps) => (
         <DatePickerFilterPopup
             closeOverlay={props.closeOverlay}
+            setPopoverWidth={props.setPopoverWidth}
             filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN}
             value={withdrawn}
             translationKey="search.filters.withdrawn"
@@ -449,9 +462,11 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency;
     const shouldDisplayFeedFilter = feedOptions.length > 1 && !!searchAdvancedFiltersForm.feed;
     const shouldDisplayPostedFilter =
-        !!searchAdvancedFiltersForm.feed && (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore);
+        !!searchAdvancedFiltersForm.feed &&
+        (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore || !!searchAdvancedFiltersForm.postedRange);
     const shouldDisplayWithdrawalTypeFilter = !!searchAdvancedFiltersForm.withdrawalType;
-    const shouldDisplayWithdrawnFilter = !!searchAdvancedFiltersForm.withdrawnOn || !!searchAdvancedFiltersForm.withdrawnAfter || !!searchAdvancedFiltersForm.withdrawnBefore;
+    const shouldDisplayWithdrawnFilter =
+        !!searchAdvancedFiltersForm.withdrawnOn || !!searchAdvancedFiltersForm.withdrawnAfter || !!searchAdvancedFiltersForm.withdrawnBefore || !!searchAdvancedFiltersForm.withdrawnRange;
 
     const filters: FilterItem[] = [
         {
@@ -612,7 +627,12 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
         return hiddenFilters.filter((key) => {
             const dateFilterKey = DATE_FILTER_KEYS.find((dateKey) => key === dateKey);
             if (dateFilterKey) {
-                return filterFormValues[`${dateFilterKey}On`] ?? filterFormValues[`${dateFilterKey}After`] ?? filterFormValues[`${dateFilterKey}Before`];
+                return (
+                    filterFormValues[`${dateFilterKey}On`] ??
+                    filterFormValues[`${dateFilterKey}After`] ??
+                    filterFormValues[`${dateFilterKey}Before`] ??
+                    filterFormValues[`${dateFilterKey}Range`]
+                );
             }
 
             if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_FIELD) {
diff --git a/src/languages/de.ts b/src/languages/de.ts
index ac5090cf337af..591965e511d06 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -519,6 +519,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Ein',
         before: 'Vor',
         after: 'Nach',
+        range: 'Bereich',
         reschedule: 'Verschieben',
         general: 'Allgemein',
         workspacesTabTitle: 'Workspaces',
@@ -7319,6 +7320,8 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
                 before: (date?: string) => `Vor ${date ?? ''}`,
                 after: (date?: string) => `Nach ${date ?? ''}`,
                 on: (date?: string) => `Am ${date ?? ''}`,
+                customDate: 'Benutzerdefiniertes Datum',
+                customRange: 'Benutzerdefinierter Bereich',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Nie',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'Letzter Monat',
@@ -7430,6 +7433,9 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
             selectAllMatchingItems: 'Alle passenden Einträge auswählen',
             allMatchingItemsSelected: 'Alle passenden Elemente ausgewählt',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Bitte wähle Daten für Von und Bis',
+        },
         spendOverTime: 'Ausgaben im Zeitverlauf',
     },
     genericErrorPage: {
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 2f7e97db1d289..2c39ea3ced62a 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -538,6 +538,7 @@ const translations = {
         on: 'On',
         before: 'Before',
         after: 'After',
+        range: 'Range',
         reschedule: 'Reschedule',
         general: 'General',
         workspacesTabTitle: 'Workspaces',
@@ -7288,6 +7289,8 @@ const translations = {
                 before: (date?: string) => `Before ${date ?? ''}`,
                 after: (date?: string) => `After ${date ?? ''}`,
                 on: (date?: string) => `On ${date ?? ''}`,
+                customDate: 'Custom date',
+                customRange: 'Custom range',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Never',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'Last month',
@@ -7399,6 +7402,9 @@ const translations = {
             selectAllMatchingItems: 'Select all matching items',
             allMatchingItemsSelected: 'All matching items selected',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Please select dates for both From and To',
+        },
     },
     genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index be67749dfcd57..8f601080c43c3 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -391,6 +391,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'El',
         before: 'Antes',
         after: 'Después',
+        range: 'Rango',
         reschedule: 'Reprogramar',
         general: 'General',
         workspacesTabTitle: 'Espacios',
@@ -7150,6 +7151,8 @@ ${amount} para ${merchant} - ${date}`,
                 before: (date) => `Antes de ${date ?? ''}`,
                 after: (date) => `Después de ${date ?? ''}`,
                 on: (date) => `En ${date ?? ''}`,
+                customDate: 'Fecha personalizada',
+                customRange: 'Rango personalizado',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Nunca',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'El mes pasado',
@@ -7253,6 +7256,9 @@ ${amount} para ${merchant} - ${date}`,
             selectAllMatchingItems: 'Seleccionar todos los elementos coincidentes',
             allMatchingItemsSelected: 'Todos los elementos coincidentes seleccionados',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Por favor, selecciona fechas para Desde y Hasta',
+        },
     },
     genericErrorPage: {
         title: '¡Oh-oh, algo salió mal!',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 3a34c0c1947c1..a94959ffe8863 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -519,6 +519,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Activé',
         before: 'Avant',
         after: 'Après',
+        range: 'Intervalle',
         reschedule: 'Reprogrammer',
         general: 'Général',
         workspacesTabTitle: 'Espaces de travail',
@@ -7341,6 +7342,8 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
                 before: (date?: string) => `Avant ${date ?? ''}`,
                 after: (date?: string) => `Après ${date ?? ''}`,
                 on: (date?: string) => `Le ${date ?? ''}`,
+                customDate: 'Date personnalisée',
+                customRange: 'Intervalle personnalisé',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Jamais',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'Mois dernier',
@@ -7452,6 +7455,9 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
             selectAllMatchingItems: 'Sélectionnez tous les éléments correspondants',
             allMatchingItemsSelected: 'Tous les éléments correspondants sont sélectionnés',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Veuillez sélectionner des dates pour De et À',
+        },
         spendOverTime: 'Dépenses dans le temps',
     },
     genericErrorPage: {
diff --git a/src/languages/it.ts b/src/languages/it.ts
index e65e7db28213a..a8220ffcd6397 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -519,6 +519,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Attivo',
         before: 'Prima',
         after: 'Dopo',
+        range: 'Intervallo',
         reschedule: 'Ripianifica',
         general: 'Generale',
         workspacesTabTitle: 'Area di lavoro',
@@ -7305,6 +7306,8 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
                 before: (date?: string) => `Prima di ${date ?? ''}`,
                 after: (date?: string) => `Dopo ${date ?? ''}`,
                 on: (date?: string) => `Su ${date ?? ''}`,
+                customDate: 'Data personalizzata',
+                customRange: 'Intervallo personalizzato',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Mai',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'Il mese scorso',
@@ -7416,6 +7419,9 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
             selectAllMatchingItems: 'Seleziona tutti gli elementi corrispondenti',
             allMatchingItemsSelected: 'Tutti gli elementi corrispondenti selezionati',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Seleziona le date per Da e A',
+        },
         spendOverTime: 'Spesa nel tempo',
     },
     genericErrorPage: {
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 9ab90d2d8dd3d..b60db47cbdc42 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -518,6 +518,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'オン',
         before: '前',
         after: '後',
+        range: '範囲',
         reschedule: '予定を変更',
         general: '一般',
         workspacesTabTitle: 'ワークスペース',
@@ -7226,6 +7227,8 @@ ${reportName}
                 before: (date?: string) => `${date ?? ''} より前`,
                 after: (date?: string) => `${date ?? ''} の後`,
                 on: (date?: string) => `${date ?? ''} に発生`,
+                customDate: 'カスタム日付',
+                customRange: 'カスタム範囲',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: '決してない',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: '先月',
@@ -7331,6 +7334,9 @@ ${reportName}
             selectAllMatchingItems: '一致する項目をすべて選択',
             allMatchingItemsSelected: '一致する項目をすべて選択済み',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: '開始日と終了日の両方を選択してください',
+        },
         spendOverTime: '時間経過による支出',
     },
     genericErrorPage: {
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 1ade218c60dfc..a6f635289993f 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -518,6 +518,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Aan',
         before: 'Vooraf',
         after: 'Na',
+        range: 'Bereik',
         reschedule: 'Opnieuw plannen',
         general: 'Algemeen',
         workspacesTabTitle: 'Werkruimtes',
@@ -7284,6 +7285,8 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
                 before: (date?: string) => `Voor ${date ?? ''}`,
                 after: (date?: string) => `Na ${date ?? ''}`,
                 on: (date?: string) => `Op ${date ?? ''}`,
+                customDate: 'Aangepaste datum',
+                customRange: 'Aangepast bereik',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Nooit',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'Vorige maand',
@@ -7383,6 +7386,9 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
             selectAllMatchingItems: 'Selecteer alle overeenkomende items',
             allMatchingItemsSelected: 'Alle overeenkomende items geselecteerd',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Selecteer datums voor Van en Tot',
+        },
         chartTitles: {
             [CONST.SEARCH.GROUP_BY.FROM]: 'Van',
             [CONST.SEARCH.GROUP_BY.CARD]: 'Kaarten',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index dea6dcd3a6ea8..43a07e494f3b5 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -518,6 +518,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Włączone',
         before: 'Przed',
         after: 'PoPo',
+        range: 'Zakres',
         reschedule: 'Przełóż',
         general: 'Ogólne',
         workspacesTabTitle: 'Przestrzenie robocze',
@@ -7273,6 +7274,8 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
                 before: (date?: string) => `Przed ${date ?? ''}`,
                 after: (date?: string) => `Po ${date ?? ''}`,
                 on: (date?: string) => `Na ${date ?? ''}`,
+                customDate: 'Niestandardowa data',
+                customRange: 'Niestandardowy zakres',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Nigdy',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'W zeszłym miesiącu',
@@ -7384,6 +7387,9 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             selectAllMatchingItems: 'Zaznacz wszystkie pasujące elementy',
             allMatchingItemsSelected: 'Zaznaczono wszystkie pasujące elementy',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Wybierz daty dla Od i Do',
+        },
         spendOverTime: 'Wydatki w czasie',
     },
     genericErrorPage: {
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index be11c98aa0865..05335fd83bbf3 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -517,6 +517,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Ativado',
         before: 'Antes',
         after: 'Depois',
+        range: 'Intervalo',
         reschedule: 'Reagendar',
         general: 'Geral',
         workspacesTabTitle: 'Espaços de trabalho',
@@ -7276,6 +7277,8 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
                 before: (date?: string) => `Antes de ${date ?? ''}`,
                 after: (date?: string) => `Depois de ${date ?? ''}`,
                 on: (date?: string) => `Em ${date ?? ''}`,
+                customDate: 'Data personalizada',
+                customRange: 'Intervalo personalizado',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: 'Nunca',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: 'Mês passado',
@@ -7387,6 +7390,9 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
             emptyStateTitle: 'Este relatório não tem despesas.',
             accessPlaceHolder: 'Abrir para ver detalhes',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Selecione datas para De e Até',
+        },
         spendOverTime: 'Gastos ao longo do tempo',
     },
     genericErrorPage: {
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index f87e2bac47587..a325ddb17fa30 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -514,6 +514,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: '开打开',
         before: '之前',
         after: '之后',
+        range: '范围',
         reschedule: '重新安排',
         general: '常规',
         workspacesTabTitle: '工作区',
@@ -7109,6 +7110,8 @@ ${reportName}
                 before: (date?: string) => `在 ${date ?? ''} 之前`,
                 after: (date?: string) => `在 ${date ?? ''} 之后`,
                 on: (date?: string) => `在 ${date ?? ''} 上`,
+                customDate: '自定义日期',
+                customRange: '自定义范围',
                 presets: {
                     [CONST.SEARCH.DATE_PRESETS.NEVER]: '从不',
                     [CONST.SEARCH.DATE_PRESETS.LAST_MONTH]: '上个月',
@@ -7214,6 +7217,9 @@ ${reportName}
             selectAllMatchingItems: '选择所有匹配的项目',
             allMatchingItemsSelected: '已选择所有匹配的项目',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: '请选择起始和结束日期',
+        },
         spendOverTime: '随时间支出',
     },
     genericErrorPage: {
diff --git a/src/libs/DateUtils.ts b/src/libs/DateUtils.ts
index 3a84dfa9fcf31..4645141a5ffc6 100644
--- a/src/libs/DateUtils.ts
+++ b/src/libs/DateUtils.ts
@@ -1017,13 +1017,16 @@ function isDateStringInMonth(dateString: string, year: number, month: number): b
 /**
  * Returns a formatted date range.
  */
-function getFormattedDateRangeForSearch(startDate: string, endDate: string): string {
+function getFormattedDateRangeForSearch(startDate: string, endDate: string, shouldShowFullYear = false, shouldOmitCurrentYear = false): string {
     const start = parse(startDate, 'yyyy-MM-dd', new Date());
     const end = parse(endDate, 'yyyy-MM-dd', new Date());
-    if (isSameYear(new Date(start), new Date(end))) {
-        return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`;
+    if (shouldShowFullYear || !isSameYear(new Date(start), new Date(end))) {
+        return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`;
     }
-    return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`;
+    if (shouldOmitCurrentYear && isThisYear(start) && isThisYear(end)) {
+        return `${format(start, 'MMM d')} - ${format(end, 'MMM d')}`;
+    }
+    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`;
 }
 
 function getYearDateRange(year: number): {start: string; end: string} {
diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index 067237fab3304..796bb136ec747 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -1,3 +1,4 @@
+import {addDays, format, parse} from 'date-fns';
 import cloneDeep from 'lodash/cloneDeep';
 import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxUpdate} from 'react-native-onyx';
@@ -37,6 +38,7 @@ import arraysEqual from '@src/utils/arraysEqual';
 import {getCardFeedsForDisplay} from './CardFeedUtils';
 import {getCardDescription} from './CardUtils';
 import {convertToBackendAmount, convertToFrontendAmountAsInteger} from './CurrencyUtils';
+import DateUtils from './DateUtils';
 import Log from './Log';
 import {validateAmount} from './MoneyRequestUtils';
 import {getPreservedNavigatorState} from './Navigation/AppNavigator/createSplitNavigator/usePreserveNavigatorState';
@@ -135,6 +137,83 @@ function sanitizeSearchValue(str: string) {
     return str;
 }
 
+function getRangeQueryValue(from?: string, to?: string) {
+    if (from && to) {
+        return `${from},${to}`;
+    }
+    if (from) {
+        return from;
+    }
+    if (to) {
+        return `,${to}`;
+    }
+    return '';
+}
+
+function getInclusiveRangeBoundary(date?: string, dayOffset = 0) {
+    const validDate = date ?? '';
+    if (!isValidDate(validDate)) {
+        return undefined;
+    }
+
+    return format(addDays(parse(validDate, 'yyyy-MM-dd', new Date()), dayOffset), 'yyyy-MM-dd');
+}
+
+function getRangeBoundariesFromFormValue(rangeValue?: string, fallbackAfter?: string, fallbackBefore?: string) {
+    const parsedRange = parseRangeQueryValue(rangeValue);
+    if (rangeValue && (parsedRange.from || parsedRange.to)) {
+        return parsedRange;
+    }
+
+    const from = getInclusiveRangeBoundary(fallbackAfter, 1);
+    const to = getInclusiveRangeBoundary(fallbackBefore, -1);
+
+    if (from && to && from > to) {
+        return {
+            from: undefined,
+            to: undefined,
+        };
+    }
+
+    return {
+        from,
+        to,
+    };
+}
+
+function getDateRangeDisplayValueFromFormValue(rangeValue?: string, fallbackAfter?: string, fallbackBefore?: string, shouldOmitCurrentYear = false) {
+    if (!rangeValue) {
+        return '';
+    }
+
+    const rangeBoundaries = getRangeBoundariesFromFormValue(rangeValue, fallbackAfter, fallbackBefore);
+    if (rangeBoundaries.from && rangeBoundaries.to) {
+        const shouldShowFullYear = !shouldOmitCurrentYear || DateUtils.doesDateBelongToAPastYear(rangeBoundaries.from) || DateUtils.doesDateBelongToAPastYear(rangeBoundaries.to);
+        return DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, shouldShowFullYear, shouldOmitCurrentYear);
+    }
+
+    const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+    return singleBoundary ? DateUtils.formatToReadableString(singleBoundary) : '';
+}
+
+function parseRangeQueryValue(rangeValue?: string) {
+    if (!rangeValue) {
+        return {
+            from: undefined,
+            to: undefined,
+        };
+    }
+
+    const [rawFrom = '', rawTo = ''] = rangeValue.split(',', 2);
+    const from = isValidDate(rawFrom) ? rawFrom : undefined;
+    const to = isValidDate(rawTo) ? rawTo : undefined;
+
+    return {
+        from,
+        to,
+    };
+}
+
 /**
  * @private
  * Returns date filter value for QueryString.
@@ -144,12 +223,23 @@ function buildDateFilterQuery(filterValues: Partial<SearchAdvancedFiltersForm>,
     const dateOn = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`];
     const dateAfter = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`];
     const dateBefore = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`];
+    const dateRange = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}`];
+    const rangeBoundaries = parseRangeQueryValue(dateRange);
+    const hasRange = !!(rangeBoundaries.from ?? rangeBoundaries.to);
 
     const dateFilters = [];
 
     if (dateOn) {
         dateFilters.push(`${filterKey}:${dateOn}`);
     }
+    if (hasRange) {
+        if (rangeBoundaries.from) {
+            dateFilters.push(`${filterKey}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN_OR_EQUAL_TO]}${rangeBoundaries.from}`);
+        }
+        if (rangeBoundaries.to) {
+            dateFilters.push(`${filterKey}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO]}${rangeBoundaries.to}`);
+        }
+    }
     if (dateAfter) {
         dateFilters.push(`${filterKey}>${dateAfter}`);
     }
@@ -214,8 +304,20 @@ function buildFilterValuesString(filterName: string, queryFilters: QueryFilter[]
             filterValueString += `${delimiter}${sanitizeSearchValue(queryFilter.value.toString())}`;
         } else if (queryFilter.operator === CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO) {
             filterValueString += ` -${filterName}:${sanitizeSearchValue(queryFilter.value.toString())}`;
+        } else if (queryFilter.operator === CONST.SEARCH.SYNTAX_OPERATORS.RANGE) {
+            const rangeBoundaries = parseRangeQueryValue(queryFilter.value.toString());
+            if (rangeBoundaries.from) {
+                filterValueString += ` ${filterName}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN_OR_EQUAL_TO]}${sanitizeSearchValue(rangeBoundaries.from)}`;
+            }
+            if (rangeBoundaries.to) {
+                filterValueString += ` ${filterName}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO]}${sanitizeSearchValue(rangeBoundaries.to)}`;
+            }
         } else {
-            filterValueString += ` ${filterName}${operatorToCharMap[queryFilter.operator]}${sanitizeSearchValue(queryFilter.value.toString())}`;
+            const operatorChar = operatorToCharMap[queryFilter.operator];
+            if (!operatorChar) {
+                continue;
+            }
+            filterValueString += ` ${filterName}${operatorChar}${sanitizeSearchValue(queryFilter.value.toString())}`;
         }
     }
 
@@ -620,6 +722,20 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvanc
     // only available for the previous type. Remove all filters that are not allowed for the new type
     const providedFilterKeys = Object.keys(supportedFilterValues) as SearchAdvancedFiltersKey[];
     for (const filter of providedFilterKeys) {
+        const isDateRangeModifier = filter.endsWith(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+        if (isDateRangeModifier) {
+            const dateKey = filter.slice(0, -CONST.SEARCH.DATE_MODIFIERS.RANGE.length);
+            const afterKey = `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as SearchAdvancedFiltersKey;
+            const beforeKey = `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as SearchAdvancedFiltersKey;
+
+            if (
+                isFilterSupported(afterKey, supportedFilterValues.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE) ||
+                isFilterSupported(beforeKey, supportedFilterValues.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE)
+            ) {
+                continue;
+            }
+        }
+
         if (isFilterSupported(filter, supportedFilterValues.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE)) {
             continue;
         }
@@ -719,6 +835,7 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvanc
                 const isFieldNegated = filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX);
                 const isTextBasedReportField = filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX) || isNegated;
                 const fieldPrefix = isFieldNegated ? '-' : '';
+                const isRangeDateField = filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX);
 
                 if (isTextBasedReportField) {
                     return `${fieldPrefix}${filterKey}:${value}`;
@@ -733,6 +850,25 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvanc
                     return `${key}:${value}`;
                 }
 
+                if (isRangeDateField) {
+                    const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX, '');
+                    const key = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}`;
+                    const rangeBoundaries = parseRangeQueryValue(filterValue as string | undefined);
+                    const rangeFilters: string[] = [];
+                    if (rangeBoundaries.from) {
+                        rangeFilters.push(`${key}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN_OR_EQUAL_TO]}${rangeBoundaries.from}`);
+                    }
+                    if (rangeBoundaries.to) {
+                        rangeFilters.push(`${key}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO]}${rangeBoundaries.to}`);
+                    }
+
+                    if (rangeFilters.length === 0) {
+                        return undefined;
+                    }
+
+                    return rangeFilters.join(' ');
+                }
+
                 if (isAfterDateField) {
                     const key = filterKey.replace(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX, CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX);
                     return `${key}>${value}`;
@@ -948,9 +1084,12 @@ function buildFilterFormValuesFromQuery(
             const beforeKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.BEFORE}`;
             const afterKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.AFTER}`;
             const onKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.ON}`;
+            const rangeKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.RANGE}`;
 
             const beforeFilter = filterList.find((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN && isValidDate(filter.value.toString()));
             const afterFilter = filterList.find((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN && isValidDate(filter.value.toString()));
+            const rangeStartFilter = filterList.find((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN_OR_EQUAL_TO && isValidDate(filter.value.toString()));
+            const rangeEndFilter = filterList.find((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO && isValidDate(filter.value.toString()));
 
             // The `On` and `Not on` filter could be either a date or a date preset (e.g. Last month)
             const negatedFilter = filterList.find((filter) => {
@@ -959,11 +1098,19 @@ function buildFilterFormValuesFromQuery(
             const onFilter = filterList.find((filter) => {
                 return filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO && (isValidDate(filter.value.toString()) || isSearchDatePreset(filter.value.toString()));
             });
+            const existingRangeBoundaries = parseRangeQueryValue(filtersForm[rangeKey]);
+            const rangeValue = getRangeQueryValue(rangeStartFilter?.value.toString() ?? existingRangeBoundaries.from, rangeEndFilter?.value.toString() ?? existingRangeBoundaries.to);
 
             filtersForm[beforeKey] = beforeFilter?.value.toString() ?? filtersForm[beforeKey];
             filtersForm[afterKey] = afterFilter?.value.toString() ?? filtersForm[afterKey];
             filtersForm[onKey] = onFilter?.value.toString() ?? filtersForm[onKey];
             filtersForm[negatedKey] = negatedFilter?.value.toString() ?? filtersForm[negatedKey];
+
+            if (rangeValue) {
+                filtersForm[rangeKey] = rangeValue;
+                continue;
+            }
+            filtersForm[rangeKey] = undefined;
         }
 
         if (AMOUNT_FILTER_KEYS.includes(filterKey as SearchAmountFilterKeys)) {
@@ -997,17 +1144,20 @@ function buildFilterFormValuesFromQuery(
         }
 
         if (filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
-            const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX, '');
+            const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '');
 
             const textKey = filterKey as ReportFieldTextKey;
-            const negatedKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.NOT_MODIFIER}${suffix}` as ReportFieldNegatedKey;
-            const dateOnKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.ON}${suffix}` as ReportFieldDateKey;
-            const dateBeforeKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}${suffix}` as ReportFieldDateKey;
-            const dateAfterKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.AFTER}${suffix}` as ReportFieldDateKey;
+            const negatedKey: ReportFieldNegatedKey = `${CONST.SEARCH.REPORT_FIELD.NOT_PREFIX}${suffix}`;
+            const dateOnKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`;
+            const dateBeforeKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`;
+            const dateAfterKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`;
+            const dateRangeKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`;
 
             let dateBeforeFilter;
             let dateAfterFilter;
             let dateOnFilter;
+            let dateRangeStartFilter;
+            let dateRangeEndFilter;
             let negatedFilter;
             let textFilter;
 
@@ -1016,6 +1166,10 @@ function buildFilterFormValuesFromQuery(
                     dateBeforeFilter = filter;
                 } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN && isValidDate(filter.value.toString())) {
                     dateAfterFilter = filter;
+                } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN_OR_EQUAL_TO && isValidDate(filter.value.toString())) {
+                    dateRangeStartFilter = filter;
+                } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO && isValidDate(filter.value.toString())) {
+                    dateRangeEndFilter = filter;
                 } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO && (isValidDate(filter.value.toString()) || isSearchDatePreset(filter.value.toString()))) {
                     dateOnFilter = filter;
                 } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO) {
@@ -1025,11 +1179,20 @@ function buildFilterFormValuesFromQuery(
                 }
             }
 
+            const existingRangeBoundaries = parseRangeQueryValue(filtersForm[dateRangeKey]);
+            const rangeValue = getRangeQueryValue(dateRangeStartFilter?.value.toString() ?? existingRangeBoundaries.from, dateRangeEndFilter?.value.toString() ?? existingRangeBoundaries.to);
+
             filtersForm[textKey] = textFilter?.value.toString() ?? filtersForm[textKey];
             filtersForm[negatedKey] = negatedFilter?.value.toString() ?? filtersForm[negatedKey];
             filtersForm[dateOnKey] = dateOnFilter?.value.toString() ?? filtersForm[dateOnKey];
             filtersForm[dateBeforeKey] = dateBeforeFilter?.value.toString() ?? filtersForm[dateBeforeKey];
             filtersForm[dateAfterKey] = dateAfterFilter?.value.toString() ?? filtersForm[dateAfterKey];
+
+            if (rangeValue) {
+                filtersForm[dateRangeKey] = rangeValue;
+                continue;
+            }
+            filtersForm[dateRangeKey] = undefined;
         }
     }
 
@@ -1680,7 +1843,64 @@ function buildOptimisticSnapshotData(type: SearchDataTypes, data: Record<string,
     };
 }
 
+/**
+ * Derives the four Onyx form keys used by a date filter from its base `dateKey`.
+ *
+ * - For report-field date keys (starting with `CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX`)
+ *   the prefix is swapped to produce `reportFieldOn-`, `reportFieldBefore-`, etc.
+ * - For standard date-filter keys (e.g. `"date"`, `"submittedDate"`) the modifier
+ *   is appended: `"dateOn"`, `"dateBefore"`, etc.
+ */
+function getDateFilterKeys(dateKey: string) {
+    if (dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
+        const suffix = dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '');
+        return {
+            dateOnKey: `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`,
+            dateBeforeKey: `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`,
+            dateAfterKey: `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`,
+            dateRangeKey: `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`,
+        };
+    }
+    return {
+        dateOnKey: `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`,
+        dateBeforeKey: `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`,
+        dateAfterKey: `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`,
+        dateRangeKey: `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}`,
+    };
+}
+
+/** All four date modifier values keyed by their modifier name. */
+type SearchDateValues = Record<ValueOf<typeof CONST.SEARCH.DATE_MODIFIERS>, string | undefined>;
+
+/** Returns a fresh object where all four date modifiers are undefined. */
+function getEmptyDateValues(): SearchDateValues {
+    return {
+        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+    };
+}
+
+/**
+ * Returns the display title for the date modifier sub-screen header.
+ * Falls back to `fallbackTitle` when no modifier is selected.
+ */
+function getDateModifierTitle(modifier: ValueOf<typeof CONST.SEARCH.DATE_MODIFIERS> | null, fallbackTitle: string, translate: LocalizedTranslate): string {
+    if (modifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+        return translate('search.filters.date.customRange');
+    }
+    if (modifier) {
+        return translate('search.filters.date.customDate');
+    }
+    return fallbackTitle;
+}
+
 export {
+    getDateRangeDisplayValueFromFormValue,
+    getRangeBoundariesFromFormValue,
+    getRangeQueryValue,
+    parseRangeQueryValue,
     isSearchDatePreset,
     isFilterSupported,
     buildSearchQueryJSON,
@@ -1706,4 +1926,9 @@ export {
     shouldResetSort,
     buildFilterQueryWithSortDefaults,
     buildOptimisticSnapshotData,
+    getDateFilterKeys,
+    getEmptyDateValues,
+    getDateModifierTitle,
 };
+
+export type {SearchDateValues};
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index ae5d0a263d323..e9e61d186c636 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -8,7 +8,7 @@ import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScrollView from '@components/ScrollView';
-import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchDatePreset, SearchFilterKey} from '@components/Search/types';
+import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterKey} from '@components/Search/types';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
@@ -31,6 +31,7 @@ import {
     buildFilterQueryWithSortDefaults,
     buildSearchQueryJSON,
     getCurrentSearchQueryJSON,
+    getDateRangeDisplayValueFromFormValue,
     isCannedSearchQuery,
     isSearchDatePreset,
     sortOptionsWithEmptyValue,
@@ -337,9 +338,11 @@ function getFilterDisplayTitle(
         const keyOn = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.ON}`;
         const keyAfter = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.AFTER}`;
         const keyBefore = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.BEFORE}`;
+        const keyRange = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.RANGE}`;
         const dateOn = filters[keyOn];
         const dateAfter = filters[keyAfter];
         const dateBefore = filters[keyBefore];
+        const dateRange = filters[keyRange];
         const dateValue = [];
 
         if (dateOn) {
@@ -353,6 +356,12 @@ function getFilterDisplayTitle(
         if (dateBefore) {
             dateValue.push(translate('search.filters.date.before', dateBefore));
         }
+        if (dateRange) {
+            const rangeDisplay = getDateRangeDisplayValueFromFormValue(dateRange);
+            if (rangeDisplay) {
+                dateValue.push(`${translate('common.range')}: ${rangeDisplay}`);
+            }
+        }
 
         return dateValue.join(', ');
     }
@@ -388,42 +397,73 @@ function getFilterDisplayTitle(
 
     if (key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
         const values: string[] = [];
+        const reportFieldValues: Record<string, {text?: string; on?: string; after?: string; before?: string; range?: string}> = {};
 
         for (const [fieldKey, fieldValue] of Object.entries(filters)) {
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX) || !fieldValue || !fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
+            if (!fieldValue || fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX) || !fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
                 continue;
             }
 
-            const fieldName = fieldKey
+            const suffix = fieldKey
+                .replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.ON_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX, '')
-                .replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')
+                .replace(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX, '');
+
+            if (!suffix) {
+                continue;
+            }
+
+            if (!reportFieldValues[suffix]) {
+                reportFieldValues[suffix] = {};
+            }
+
+            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
+                reportFieldValues[suffix].text = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.ON_PREFIX)) {
+                reportFieldValues[suffix].on = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX)) {
+                reportFieldValues[suffix].after = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
+                reportFieldValues[suffix].before = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX)) {
+                reportFieldValues[suffix].range = fieldValue as string;
+            }
+        }
+
+        for (const [suffix, fieldDateValues] of Object.entries(reportFieldValues)) {
+            const fieldName = suffix
                 .split('-')
                 .map((word, index) => (index === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word))
                 .join(' ');
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.ON_PREFIX)) {
-                const dateString = isSearchDatePreset(fieldValue as string)
-                    ? translate(`search.filters.date.presets.${fieldValue as SearchDatePreset}`)
-                    : translate('search.filters.date.on', fieldValue as string);
+            if (fieldDateValues.text) {
+                values.push(translate('search.filters.reportField', fieldName, fieldDateValues.text));
+            }
 
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
+            if (fieldDateValues.on) {
+                const onString = isSearchDatePreset(fieldDateValues.on)
+                    ? translate(`search.filters.date.presets.${fieldDateValues.on}`)
+                    : translate('search.filters.date.on', fieldDateValues.on);
+                values.push(translate('search.filters.reportField', fieldName, onString.toLowerCase()));
             }
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX)) {
-                const dateString = translate('search.filters.date.after', fieldValue as string).toLowerCase();
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
+            if (fieldDateValues.after) {
+                const afterString = translate('search.filters.date.after', fieldDateValues.after).toLowerCase();
+                values.push(translate('search.filters.reportField', fieldName, afterString));
             }
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
-                const dateString = translate('search.filters.date.before', fieldValue as string).toLowerCase();
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
+            if (fieldDateValues.before) {
+                const beforeString = translate('search.filters.date.before', fieldDateValues.before).toLowerCase();
+                values.push(translate('search.filters.reportField', fieldName, beforeString));
             }
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
-                const valueString = translate('search.filters.reportField', fieldName, fieldValue as string);
-                values.push(valueString);
+            if (fieldDateValues.range) {
+                const rangeDisplay = getDateRangeDisplayValueFromFormValue(fieldDateValues.range);
+                if (rangeDisplay) {
+                    values.push(translate('search.filters.reportField', fieldName, `${translate('common.range')}: ${rangeDisplay}`.toLowerCase()));
+                }
             }
         }
 
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx
index 58150e8e5e0a5..695d06ddae02b 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx
@@ -3,6 +3,7 @@ import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
 import type {ReportFieldDateKey} from '@components/Search/types';
 import useOnyx from '@hooks/useOnyx';
 import {updateAdvancedFilters} from '@libs/actions/Search';
+import {getDateFilterKeys} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -20,19 +21,24 @@ function ReportFieldDate({field, close}: ReportFieldDateProps) {
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
 
-    const dateOnKey = formKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey;
-    const dateBeforeKey = formKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX) as ReportFieldDateKey;
-    const dateAfterKey = formKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey;
+    const {dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey} = getDateFilterKeys(formKey) as {
+        dateOnKey: ReportFieldDateKey;
+        dateBeforeKey: ReportFieldDateKey;
+        dateAfterKey: ReportFieldDateKey;
+        dateRangeKey: ReportFieldDateKey;
+    };
 
     const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
     const dateBeforeValue = searchAdvancedFiltersForm?.[dateBeforeKey];
     const dateAfterValue = searchAdvancedFiltersForm?.[dateAfterKey];
+    const dateRangeValue = searchAdvancedFiltersForm?.[dateRangeKey];
 
     function getDefaultDateValues() {
         return {
             [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: dateRangeValue,
         };
     }
 
@@ -46,6 +52,7 @@ function ReportFieldDate({field, close}: ReportFieldDateProps) {
             [dateOnKey]: values[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
             [dateBeforeKey]: values[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
             [dateAfterKey]: values[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
+            [dateRangeKey]: values[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? null,
         });
         close();
     };
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
index 82744203adaa6..5897571ac3b34 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
@@ -13,7 +13,7 @@ import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -43,6 +43,7 @@ function SearchFiltersReportFieldPage() {
                 const onValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`];
                 const afterValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`];
                 const beforeValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`];
+                const rangeValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`];
 
                 if (onValue) {
                     dateValues.push(isSearchDatePreset(onValue) ? translate(`search.filters.date.presets.${onValue}`) : translate('search.filters.date.on', onValue));
@@ -56,6 +57,13 @@ function SearchFiltersReportFieldPage() {
                     dateValues.push(translate('search.filters.date.before', beforeValue));
                 }
 
+                if (rangeValue) {
+                    const rangeDisplay = getDateRangeDisplayValueFromFormValue(rangeValue, afterValue, beforeValue);
+                    if (rangeDisplay) {
+                        dateValues.push(`${translate('common.range')}: ${rangeDisplay}`);
+                    }
+                }
+
                 return {key: field.fieldID, name: field.name, value: dateValues.join(', '), field};
             }
 
diff --git a/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx b/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx
index a8e3352271faf..020c8a1df4de3 100644
--- a/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx
+++ b/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx
@@ -18,7 +18,7 @@ import {exportTravelInvoiceStatementCSV, getTravelInvoiceStatementPDF} from '@li
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getRangeBoundariesFromFormValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {getDateRangeForPreset} from '@libs/SearchUIUtils';
 import {downloadTravelInvoiceStatementPDF} from '@libs/TravelInvoicingUtils';
 import CONFIG from '@src/CONFIG';
@@ -53,9 +53,15 @@ function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExp
             [CONST.SEARCH.DATE_MODIFIERS.ON]: CONST.SEARCH.DATE_PRESETS.THIS_MONTH,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
         };
     }
 
+    const getSelectedRangeBoundaries = (valuesToRead?: SearchDateValues) => {
+        const values = valuesToRead ?? dateFilterBaseRef.current?.getDateValues();
+        return getRangeBoundariesFromFormValue(values?.[CONST.SEARCH.DATE_MODIFIERS.RANGE]);
+    };
+
     /**
      * Checks whether the user has a complete date selection.
      * A selection is complete when either ON is set (preset or specific date),
@@ -73,6 +79,11 @@ function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExp
             return true;
         }
 
+        const {from: rangeStart, to: rangeEnd} = getSelectedRangeBoundaries(values);
+        if (rangeStart && rangeEnd) {
+            return true;
+        }
+
         // Both after and before must be set for a complete range
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- We intentionally use logical OR (||) instead of ?? because these values are strings and we want to treat empty strings as "not set" (i.e., falsy).
         return !!(values[CONST.SEARCH.DATE_MODIFIERS.AFTER] && values[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
@@ -85,6 +96,11 @@ function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExp
         const values = valuesToValidate ?? dateFilterBaseRef.current?.getDateValues();
         const dateAfter = values?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const dateBefore = values?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+        const {from: rangeStart, to: rangeEnd} = getSelectedRangeBoundaries(values);
+
+        if (rangeStart && rangeEnd && rangeStart > rangeEnd) {
+            return true;
+        }
 
         if (dateAfter && dateBefore && dateAfter > dateBefore) {
             return true;
@@ -117,6 +133,7 @@ function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExp
         const dateOn = values?.[CONST.SEARCH.DATE_MODIFIERS.ON];
         const dateAfter = values?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const dateBefore = values?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+        const {from: rangeStart, to: rangeEnd} = getSelectedRangeBoundaries(values);
 
         if (dateOn) {
             if (isSearchDatePreset(dateOn)) {
@@ -127,6 +144,10 @@ function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExp
             return {startDate: dateOn, endDate: dateOn};
         }
 
+        if (rangeStart && rangeEnd) {
+            return {startDate: rangeStart, endDate: rangeEnd};
+        }
+
         if (dateAfter && dateBefore) {
             return {
                 startDate: dateAfter,
@@ -165,7 +186,7 @@ function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExp
 
         setIsDownloading(true);
         getTravelInvoiceStatementPDF(policyID, startDate, endDate);
-    }, [isGenerating, policyID, getDateRange, translate]);
+    }, [getDateRange, hasDateSelected, isDateRangeInvalid, isGenerating, policyID, translate]);
 
     useEffect(() => {
         if (!prevIsGenerating || isGenerating) {
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
index 4e799a2b01652..b6b512a5eb5eb 100644
--- a/src/types/form/SearchAdvancedFiltersForm.ts
+++ b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -38,31 +38,37 @@ const FILTER_KEYS = {
     DATE_ON: 'dateOn',
     DATE_AFTER: 'dateAfter',
     DATE_BEFORE: 'dateBefore',
+    DATE_RANGE: 'dateRange',
 
     SUBMITTED_NOT: 'submittedNot',
     SUBMITTED_ON: 'submittedOn',
     SUBMITTED_AFTER: 'submittedAfter',
     SUBMITTED_BEFORE: 'submittedBefore',
+    SUBMITTED_RANGE: 'submittedRange',
 
     APPROVED_NOT: 'approvedNot',
     APPROVED_ON: 'approvedOn',
     APPROVED_AFTER: 'approvedAfter',
     APPROVED_BEFORE: 'approvedBefore',
+    APPROVED_RANGE: 'approvedRange',
 
     PAID_NOT: 'paidNot',
     PAID_ON: 'paidOn',
     PAID_AFTER: 'paidAfter',
     PAID_BEFORE: 'paidBefore',
+    PAID_RANGE: 'paidRange',
 
     EXPORTED_NOT: 'exportedNot',
     EXPORTED_ON: 'exportedOn',
     EXPORTED_AFTER: 'exportedAfter',
     EXPORTED_BEFORE: 'exportedBefore',
+    EXPORTED_RANGE: 'exportedRange',
 
     POSTED_NOT: 'postedNot',
     POSTED_ON: 'postedOn',
     POSTED_AFTER: 'postedAfter',
     POSTED_BEFORE: 'postedBefore',
+    POSTED_RANGE: 'postedRange',
 
     WITHDRAWAL_TYPE_NOT: 'withdrawalTypeNot',
     WITHDRAWAL_TYPE: 'withdrawalType',
@@ -71,6 +77,7 @@ const FILTER_KEYS = {
     WITHDRAWN_ON: 'withdrawnOn',
     WITHDRAWN_AFTER: 'withdrawnAfter',
     WITHDRAWN_BEFORE: 'withdrawnBefore',
+    WITHDRAWN_RANGE: 'withdrawnRange',
 
     CURRENCY_NOT: 'currencyNot',
     CURRENCY: 'currency',
@@ -551,36 +558,41 @@ type SearchAdvancedFiltersForm = Form<
 
         [FILTER_KEYS.STATUS]: string[] | string;
 
-        [FILTER_KEYS.DATE_AFTER]: string;
-        [FILTER_KEYS.DATE_BEFORE]: string;
-
         [FILTER_KEYS.DATE_ON]: string;
         [FILTER_KEYS.DATE_NOT]: string;
+        [FILTER_KEYS.DATE_AFTER]: string;
+        [FILTER_KEYS.DATE_BEFORE]: string;
+        [FILTER_KEYS.DATE_RANGE]: string;
 
         [FILTER_KEYS.SUBMITTED_ON]: string;
         [FILTER_KEYS.SUBMITTED_NOT]: string;
         [FILTER_KEYS.SUBMITTED_AFTER]: string;
         [FILTER_KEYS.SUBMITTED_BEFORE]: string;
+        [FILTER_KEYS.SUBMITTED_RANGE]: string;
 
         [FILTER_KEYS.APPROVED_ON]: string;
         [FILTER_KEYS.APPROVED_NOT]: string;
         [FILTER_KEYS.APPROVED_AFTER]: string;
         [FILTER_KEYS.APPROVED_BEFORE]: string;
+        [FILTER_KEYS.APPROVED_RANGE]: string;
 
         [FILTER_KEYS.PAID_ON]: string;
         [FILTER_KEYS.PAID_NOT]: string;
         [FILTER_KEYS.PAID_AFTER]: string;
         [FILTER_KEYS.PAID_BEFORE]: string;
+        [FILTER_KEYS.PAID_RANGE]: string;
 
         [FILTER_KEYS.EXPORTED_ON]: string;
         [FILTER_KEYS.EXPORTED_NOT]: string;
         [FILTER_KEYS.EXPORTED_AFTER]: string;
         [FILTER_KEYS.EXPORTED_BEFORE]: string;
+        [FILTER_KEYS.EXPORTED_RANGE]: string;
 
         [FILTER_KEYS.POSTED_ON]: string;
         [FILTER_KEYS.POSTED_NOT]: string;
         [FILTER_KEYS.POSTED_AFTER]: string;
         [FILTER_KEYS.POSTED_BEFORE]: string;
+        [FILTER_KEYS.POSTED_RANGE]: string;
 
         [FILTER_KEYS.WITHDRAWAL_TYPE]: SearchWithdrawalType;
         [FILTER_KEYS.WITHDRAWAL_TYPE_NOT]: SearchWithdrawalType;
@@ -589,6 +601,7 @@ type SearchAdvancedFiltersForm = Form<
         [FILTER_KEYS.WITHDRAWN_NOT]: string;
         [FILTER_KEYS.WITHDRAWN_AFTER]: string;
         [FILTER_KEYS.WITHDRAWN_BEFORE]: string;
+        [FILTER_KEYS.WITHDRAWN_RANGE]: string;
 
         [FILTER_KEYS.CURRENCY]: string[];
         [FILTER_KEYS.CURRENCY_NOT]: string[];
diff --git a/tests/unit/Search/SearchQueryUtilsTest.ts b/tests/unit/Search/SearchQueryUtilsTest.ts
index e136200b0b7f2..3dc5f23d9fe58 100644
--- a/tests/unit/Search/SearchQueryUtilsTest.ts
+++ b/tests/unit/Search/SearchQueryUtilsTest.ts
@@ -5,6 +5,7 @@ import {generatePolicyID} from '@libs/actions/Policy/Policy';
 // eslint-disable-next-line no-restricted-syntax
 import type * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
+import DateUtils from '@src/libs/DateUtils';
 import {
     buildFilterFormValuesFromQuery,
     buildFilterQueryWithSortDefaults,
@@ -12,8 +13,10 @@ import {
     buildSearchQueryJSON,
     buildSearchQueryString,
     buildUserReadableQueryString,
+    getDateRangeDisplayValueFromFormValue,
     getFilterDisplayValue,
     getQueryWithUpdatedValues,
+    getRangeBoundariesFromFormValue,
     shouldHighlight,
     shouldResetSort,
     sortOptionsWithEmptyValue,
@@ -56,6 +59,41 @@ jest.mock('@libs/PersonalDetailsUtils', () => {
 const defaultQuery = `type:expense sortBy:date sortOrder:desc`;
 
 describe('SearchQueryUtils', () => {
+    describe('getDateRangeDisplayValueFromFormValue', () => {
+        test('returns full range display when both boundaries exist', () => {
+            const result = getDateRangeDisplayValueFromFormValue('2025-03-01,2025-03-10');
+
+            expect(result).toBe(DateUtils.getFormattedDateRangeForSearch('2025-03-01', '2025-03-10', true));
+        });
+
+        test('returns single boundary display when only one boundary exists', () => {
+            const result = getDateRangeDisplayValueFromFormValue('2025-03-01');
+
+            expect(result).toBe(DateUtils.formatToReadableString('2025-03-01'));
+        });
+
+        test('falls back to inclusive boundaries when range value is invalid', () => {
+            const result = getDateRangeDisplayValueFromFormValue('invalid', '2025-03-01', '2025-03-10');
+
+            expect(result).toBe(DateUtils.getFormattedDateRangeForSearch('2025-03-02', '2025-03-09', true));
+        });
+
+        test('returns empty string when no valid range boundaries exist', () => {
+            const result = getDateRangeDisplayValueFromFormValue('invalid');
+
+            expect(result).toBe('');
+        });
+    });
+
+    describe('getRangeBoundariesFromFormValue', () => {
+        test('falls back to inclusive boundaries when range value is missing', () => {
+            expect(getRangeBoundariesFromFormValue(undefined, '2025-03-01', '2025-03-10')).toEqual({
+                from: '2025-03-02',
+                to: '2025-03-09',
+            });
+        });
+    });
+
     describe('getQueryWithUpdatedValues', () => {
         test('returns default query for empty value', () => {
             const userQuery = '';
@@ -246,6 +284,83 @@ describe('SearchQueryUtils', () => {
             expect(result).not.toMatch(CONST.VALIDATE_FOR_HTML_TAG_REGEX);
         });
 
+        test('serializes explicit date range with inclusive boundaries', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                dateRange: '2025-03-01,2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('date>=2025-03-01');
+            expect(result).toContain('date<=2025-03-10');
+            expect(result).not.toContain('date>2025-03-01');
+            expect(result).not.toContain('date<2025-03-10');
+
+            const queryJSON = buildSearchQueryJSON(result);
+            const dateOperators = queryJSON?.flatFilters
+                .filter((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE)
+                .flatMap((filter) => filter.filters.map((dateFilter) => dateFilter.operator));
+            expect(dateOperators).toEqual(expect.arrayContaining([CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN_OR_EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO]));
+        });
+
+        test('serializes explicit report field range with inclusive boundaries', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                'reportFieldRange-start-date': '2025-03-01,2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('reportField-start-date>=2025-03-01');
+            expect(result).toContain('reportField-start-date<=2025-03-10');
+            expect(result).not.toContain('reportField-start-date>2025-03-01');
+            expect(result).not.toContain('reportField-start-date<2025-03-10');
+        });
+
+        test('serializes explicit range with only before boundary using leading comma', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                dateRange: ',2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('date<=2025-03-10');
+
+            const queryJSON = buildSearchQueryJSON(result);
+            expect(queryJSON?.flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE)?.filters).toEqual([
+                {operator: CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO, value: '2025-03-10'},
+            ]);
+        });
+
+        test('invalid range value keeps after and before filters exclusive', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                dateRange: 'invalid',
+                dateAfter: '2025-03-01',
+                dateBefore: '2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('date>2025-03-01');
+            expect(result).toContain('date<2025-03-10');
+            expect(result).not.toContain('date>=2025-03-01');
+            expect(result).not.toContain('date<=2025-03-10');
+        });
+
+        test('invalid report field range value keeps after and before filters exclusive', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                'reportFieldRange-start-date': 'invalid',
+                'reportFieldAfter-start-date': '2025-03-01',
+                'reportFieldBefore-start-date': '2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('reportField-start-date>2025-03-01');
+            expect(result).toContain('reportField-start-date<2025-03-10');
+            expect(result).not.toContain('reportField-start-date>=2025-03-01');
+            expect(result).not.toContain('reportField-start-date<=2025-03-10');
+        });
+
         test('total filter values', () => {
             const filterValues: Partial<SearchAdvancedFiltersForm> = {
                 type: 'expense',
@@ -773,6 +888,90 @@ describe('SearchQueryUtils', () => {
             });
         });
 
+        test('hydrates explicit date range flag from inclusive range boundaries', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense date>=2025-03-01 date<=2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
+
+            expect(result.dateAfter).toBeUndefined();
+            expect(result.dateBefore).toBeUndefined();
+            expect(result.dateRange).toBe('2025-03-01,2025-03-10');
+        });
+
+        test('does not set explicit date range flag when only date boundaries are provided', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense date>2025-03-01 date<2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
+
+            expect(result.dateRange).toBeUndefined();
+        });
+
+        test('hydrates explicit report field range flag from inclusive range boundaries', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense reportField-start-date>=2025-03-01 reportField-start-date<=2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
+
+            expect(result['reportFieldAfter-start-date']).toBeUndefined();
+            expect(result['reportFieldBefore-start-date']).toBeUndefined();
+            expect(result['reportFieldRange-start-date']).toBe('2025-03-01,2025-03-10');
+        });
+
+        test('does not set explicit report field range flag when only date boundaries are provided', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense reportField-start-date>2025-03-01 reportField-start-date<2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
+
+            expect(result['reportFieldRange-start-date']).toBeUndefined();
+        });
+
         describe('view parameter', () => {
             const emptyParams = {
                 policyCategories: {},

From 38bf7081cf90e9c877318e1f47b9882eaff2023b Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Mon, 16 Mar 2026 02:55:00 +0530
Subject: [PATCH 02/16] fix Android view collapse and calendar selecting style
 issue

---
 .../DatePicker/CalendarPicker/Day.tsx         | 24 +++++++++++++++----
 .../DatePicker/CalendarPicker/index.tsx       | 12 ++++++----
 .../FilterDropdowns/DateSelectPopup.tsx       |  4 ++--
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/Day.tsx b/src/components/DatePicker/CalendarPicker/Day.tsx
index d1f22ceee8689..85fbe2af095c0 100644
--- a/src/components/DatePicker/CalendarPicker/Day.tsx
+++ b/src/components/DatePicker/CalendarPicker/Day.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
 
@@ -23,20 +24,35 @@ type DayProps = {
 };
 
 function Day({disabled, selected, pressed, hovered, children}: DayProps) {
+    const theme = useTheme();
     const themeStyles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
         <View
-            // Prevent Android from flattening this View, which can cause background
-            // color changes (day selection) to not trigger a native repaint.
+            // Prevent Android from flattening this View, which can cause
+            // background color changes (day selection) to not trigger a native repaint.
             collapsable={false}
             style={[
                 themeStyles.calendarDayContainer,
-                selected ? themeStyles.buttonSuccess : {},
+                // Always provide an explicit backgroundColor so Android (which
+                // does not reset a property when the style changes to {})
+                // correctly transitions the selection highlight on every render.
+                {backgroundColor: selected ? theme.success : 'transparent'},
                 !disabled && !selected ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true) : {},
             ]}
         >
-            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.buttonSuccessText : {}]}>{children}</Text>
+            <Text
+                style={[
+                    disabled ? themeStyles.buttonOpacityDisabled : {},
+                    // Always provide an explicit color so Android repaints text
+                    // correctly when selection changes. Using {} causes Android
+                    // to retain the previous white color after deselection,
+                    // making the day number invisible against the background.
+                    {color: selected ? theme.buttonSuccessText : theme.text},
+                ]}
+            >
+                {children}
+            </Text>
         </View>
     );
 }
diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index b36411f521454..26c0be13e2936 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -180,9 +180,9 @@ function CalendarPicker({
     const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle];
     const headerPaddingStyle = headerContainerStyle ?? themeStyles.ph5;
     // On mobile (isSmallScreenWidth is always true on native), the height animation is skipped
-    // so using Animated.View is unnecessary. Using a plain View avoids activating Reanimated's
-    // Fabric commit hook, which can interfere with React's reconciliation of child view styles
-    // on Android and prevent day-selection background changes from painting.
+    // so using Animated.View is unnecessary. Using a plain View with collapsable={false} avoids
+    // activating Reanimated's Fabric commit hook, which on Android can interfere with React's
+    // reconciliation of child view styles and prevent day-selection background changes from painting.
     const CalendarBody = isSmallScreenWidth ? View : Animated.View;
 
     const getAccessibilityState = useCallback((isSelected: boolean) => ({selected: isSelected}), []);
@@ -264,10 +264,14 @@ function CalendarPicker({
                     </View>
                 ))}
             </View>
-            <CalendarBody style={calendarContainerStyle}>
+            <CalendarBody
+                collapsable={false}
+                style={calendarContainerStyle}
+            >
                 {calendarDaysMatrix?.map((week) => (
                     <View
                         key={`week-${week.toString()}`}
+                        collapsable={false}
                         style={[themeStyles.flexRow, themeStyles.calendarWeekContainer]}
                     >
                         {week.map((day, index) => {
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index f67be4f1f5df2..4978919b62dfd 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -141,7 +141,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     // Widen the popover when Range is selected, reset when not
     useEffect(() => {
         if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-            setPopoverWidth?.(CONST.POPOVER_DATE_WIDTH);
+            setPopoverWidth?.(CONST.POPOVER_DATE_RANGE_WIDTH);
         } else {
             setPopoverWidth?.(undefined);
         }
@@ -308,4 +308,4 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 }
 
 export type {DateSelectPopupProps};
-export default DateSelectPopup;
+export default DateSelectPopup;
\ No newline at end of file

From 66ac60539624b34fdc3443b4bc6d0329fa7ca90d Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Mon, 16 Mar 2026 02:55:19 +0530
Subject: [PATCH 03/16] fix: year selection autoselect on android

---
 src/components/DatePicker/CalendarPicker/YearPickerModal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
index 02916ae4baaf5..7bee7379d62fc 100644
--- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
+++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {Keyboard} from 'react-native';
+import {Keyboard, Platform} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -54,6 +54,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             headerMessage,
             maxLength: 4,
             inputMode: CONST.INPUT_MODE.NUMERIC,
+            disableAutoFocus: Platform.OS === CONST.PLATFORM.ANDROID,
         }),
         [headerMessage, searchText, translate],
     );

From 81ae58c3df2e1055707090166c269e1ca7b5e7b9 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Mon, 16 Mar 2026 03:08:52 +0530
Subject: [PATCH 04/16] prettify

---
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 4978919b62dfd..63df58291e92a 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -308,4 +308,4 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 }
 
 export type {DateSelectPopupProps};
-export default DateSelectPopup;
\ No newline at end of file
+export default DateSelectPopup;

From 237f56a261d004ec2b63b2c035623467710e2784 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Mon, 16 Mar 2026 21:36:25 +0530
Subject: [PATCH 05/16] increase code coverage, utc time fix

---
 .../FilterComponents/RangeDatePicker.tsx      |  14 +-
 .../SearchPageHeader/useSearchFiltersBar.tsx  | 122 ++++++++++--------
 .../CONST/searchDateRangeConstants.test.ts    |  17 +++
 .../hooks/useSearchFiltersBarHelpers.test.ts  |  26 ++++
 4 files changed, 124 insertions(+), 55 deletions(-)
 create mode 100644 tests/unit/CONST/searchDateRangeConstants.test.ts
 create mode 100644 tests/unit/hooks/useSearchFiltersBarHelpers.test.ts

diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index 2ce8dea4f29c5..1a2bbb781e0c7 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -1,3 +1,4 @@
+import {isValid, parse} from 'date-fns';
 import React from 'react';
 import {View} from 'react-native';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
@@ -28,14 +29,23 @@ type RangeDatePickerProps = {
     forceVertical?: boolean;
 };
 
+function parseCalendarDate(dateValue?: string): Date | undefined {
+    if (!dateValue) {
+        return undefined;
+    }
+
+    const parsedDate = parse(dateValue, CONST.DATE.FNS_FORMAT_STRING, new Date());
+    return isValid(parsedDate) ? parsedDate : undefined;
+}
+
 function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shouldShowError = false, forceVertical = false}: RangeDatePickerProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
     const shouldStack = forceVertical || isSmallScreenWidth;
-    const fromMaxDate = toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE;
-    const toMinDate = fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE;
+    const fromMaxDate = parseCalendarDate(toValue) ?? CONST.CALENDAR_PICKER.MAX_DATE;
+    const toMinDate = parseCalendarDate(fromValue) ?? CONST.CALENDAR_PICKER.MIN_DATE;
 
     return (
         <>
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 3f453b9a1f9dd..7d9f8a09ed4b3 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -2,6 +2,7 @@ import {emailSelector} from '@selectors/Session';
 import React from 'react';
 import type {ReactNode} from 'react';
 import type {OnyxCollection} from 'react-native-onyx';
+import type {TupleToUnion} from 'type-fest';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import type {SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
@@ -80,6 +81,45 @@ type UseSearchFiltersBarResult = {
     translate: ReturnType<typeof useLocalize>['translate'];
 };
 
+type SearchDateFilterValues = {
+    on?: string;
+    after?: string;
+    before?: string;
+    range?: string;
+};
+
+function createDateDisplayValue(filterValues: SearchDateFilterValues, translate: ReturnType<typeof useLocalize>['translate']): [SearchDateValues, string[]] {
+    const value: SearchDateValues = {
+        [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
+        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
+        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
+    };
+
+    const displayText: string[] = [];
+    if (value.On) {
+        displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
+    }
+    if (value.After) {
+        displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+    }
+    if (value.Before) {
+        displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+    }
+    if (value.Range) {
+        const rangeDisplay = getDateRangeDisplayValueFromFormValue(value.Range, undefined, undefined, true);
+        if (rangeDisplay) {
+            displayText.push(rangeDisplay);
+        }
+    }
+
+    return [value, displayText];
+}
+
+function hasDateFilterValue(filterFormValues: Partial<SearchAdvancedFiltersForm>, dateFilterKey: TupleToUnion<typeof DATE_FILTER_KEYS>) {
+    return filterFormValues[`${dateFilterKey}On`] ?? filterFormValues[`${dateFilterKey}After`] ?? filterFormValues[`${dateFilterKey}Before`] ?? filterFormValues[`${dateFilterKey}Range`];
+}
+
 /**
  * Extracts only the fields needed by getTypeOptions (canSendInvoice check).
  * Strips heavyweight fields like customUnits, connections, taxRates, fieldList, rules, exportLayouts.
@@ -190,54 +230,35 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const isOptions = Object.values(CONST.SEARCH.IS_VALUES).map((value) => ({text: translate(`common.${value}`), value}));
     const is = isFilterValues ? isOptions.filter((option) => isFilterValues.includes(option.value)) : [];
 
-    const createDateDisplayValue = (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
-        const value: SearchDateValues = {
-            [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
-            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
-            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
-            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
-        };
-
-        const displayText: string[] = [];
-        if (value.On) {
-            displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
-        }
-        if (value.After) {
-            displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
-        }
-        if (value.Before) {
-            displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
-        }
-        if (value.Range) {
-            const rangeDisplay = getDateRangeDisplayValueFromFormValue(value.Range, undefined, undefined, true);
-            if (rangeDisplay) {
-                displayText.push(rangeDisplay);
-            }
-        }
+    const [date, displayDate] = createDateDisplayValue(
+        {
+            on: searchAdvancedFiltersForm.dateOn,
+            after: searchAdvancedFiltersForm.dateAfter,
+            before: searchAdvancedFiltersForm.dateBefore,
+            range: searchAdvancedFiltersForm.dateRange,
+        },
+        translate,
+    );
 
-        return [value, displayText];
-    };
+    const [posted, displayPosted] = createDateDisplayValue(
+        {
+            on: searchAdvancedFiltersForm.postedOn,
+            after: searchAdvancedFiltersForm.postedAfter,
+            before: searchAdvancedFiltersForm.postedBefore,
+            range: searchAdvancedFiltersForm.postedRange,
+        },
+        translate,
+    );
 
-    const [date, displayDate] = createDateDisplayValue({
-        on: searchAdvancedFiltersForm.dateOn,
-        after: searchAdvancedFiltersForm.dateAfter,
-        before: searchAdvancedFiltersForm.dateBefore,
-        range: searchAdvancedFiltersForm.dateRange,
-    });
-
-    const [posted, displayPosted] = createDateDisplayValue({
-        on: searchAdvancedFiltersForm.postedOn,
-        after: searchAdvancedFiltersForm.postedAfter,
-        before: searchAdvancedFiltersForm.postedBefore,
-        range: searchAdvancedFiltersForm.postedRange,
-    });
-
-    const [withdrawn, displayWithdrawn] = createDateDisplayValue({
-        on: searchAdvancedFiltersForm.withdrawnOn,
-        after: searchAdvancedFiltersForm.withdrawnAfter,
-        before: searchAdvancedFiltersForm.withdrawnBefore,
-        range: searchAdvancedFiltersForm.withdrawnRange,
-    });
+    const [withdrawn, displayWithdrawn] = createDateDisplayValue(
+        {
+            on: searchAdvancedFiltersForm.withdrawnOn,
+            after: searchAdvancedFiltersForm.withdrawnAfter,
+            before: searchAdvancedFiltersForm.withdrawnBefore,
+            range: searchAdvancedFiltersForm.withdrawnRange,
+        },
+        translate,
+    );
 
     const withdrawalTypeOptions = getWithdrawalTypeOptions(translate);
     const withdrawalType = withdrawalTypeOptions.find((option) => option.value === searchAdvancedFiltersForm.withdrawalType) ?? null;
@@ -627,12 +648,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
         return hiddenFilters.filter((key) => {
             const dateFilterKey = DATE_FILTER_KEYS.find((dateKey) => key === dateKey);
             if (dateFilterKey) {
-                return (
-                    filterFormValues[`${dateFilterKey}On`] ??
-                    filterFormValues[`${dateFilterKey}After`] ??
-                    filterFormValues[`${dateFilterKey}Before`] ??
-                    filterFormValues[`${dateFilterKey}Range`]
-                );
+                return hasDateFilterValue(filterFormValues, dateFilterKey);
             }
 
             if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_FIELD) {
@@ -677,4 +693,4 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
 
 export default useSearchFiltersBar;
 export type {FilterItem};
-export {typeOptionsPoliciesSelector};
+export {createDateDisplayValue, hasDateFilterValue, typeOptionsPoliciesSelector};
diff --git a/tests/unit/CONST/searchDateRangeConstants.test.ts b/tests/unit/CONST/searchDateRangeConstants.test.ts
new file mode 100644
index 0000000000000..c9d939decfd0d
--- /dev/null
+++ b/tests/unit/CONST/searchDateRangeConstants.test.ts
@@ -0,0 +1,17 @@
+import CONST from '@src/CONST';
+
+describe('search date range constants', () => {
+    it('defines all new range-related constants', () => {
+        const reportFieldPrefixes = CONST.SEARCH.REPORT_FIELD as Record<string, string>;
+
+        expect(CONST.POPOVER_DATE_RANGE_WIDTH).toBe(672);
+        expect(CONST.SEARCH.SYNTAX_OPERATORS.RANGE).toBe('range');
+        expect(reportFieldPrefixes.RANGE_PREFIX).toBe('reportFieldRange-');
+        expect(CONST.SEARCH.DATE_MODIFIERS.RANGE).toBe('Range');
+    });
+
+    it('keeps custom date modifier list unchanged', () => {
+        expect(CONST.SEARCH.CUSTOM_DATE_MODIFIERS).toEqual([CONST.SEARCH.DATE_MODIFIERS.ON, CONST.SEARCH.DATE_MODIFIERS.BEFORE, CONST.SEARCH.DATE_MODIFIERS.AFTER]);
+        expect(CONST.SEARCH.CUSTOM_DATE_MODIFIERS).not.toContain(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+    });
+});
diff --git a/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts b/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
new file mode 100644
index 0000000000000..5bcf8ec785b26
--- /dev/null
+++ b/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
@@ -0,0 +1,26 @@
+import {createDateDisplayValue, hasDateFilterValue} from '@components/Search/SearchPageHeader/useSearchFiltersBar';
+import CONST from '@src/CONST';
+
+describe('useSearchFiltersBar helpers', () => {
+    it('includes a readable range display value when range is set', () => {
+        const translate = (key: string) => key;
+
+        const [dateValues, displayValues] = createDateDisplayValue(
+            {
+                range: '2026-03-01,2026-03-31',
+            },
+            translate,
+        );
+
+        expect(dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]).toBe('2026-03-01,2026-03-31');
+        expect(displayValues.length).toBe(1);
+    });
+
+    it('prefers range when on/after/before are empty for hidden date filter checks', () => {
+        const filterFormValues = {
+            postedRange: '2026-02-01,2026-02-29',
+        };
+
+        expect(hasDateFilterValue(filterFormValues, CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED)).toBe('2026-02-01,2026-02-29');
+    });
+});

From b57910ac02513a6e580b0531e01adcb4b448acbd Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 18 Mar 2026 23:47:12 +0530
Subject: [PATCH 06/16] fix: yearpickermodal

---
 src/components/DatePicker/CalendarPicker/Day.tsx             | 5 +----
 src/components/DatePicker/CalendarPicker/YearPickerModal.tsx | 4 +---
 src/components/Search/FilterComponents/DateFilterBase.tsx    | 5 ++++-
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx    | 1 +
 src/components/Search/SearchLoadingSkeleton.tsx              | 3 ++-
 tests/unit/hooks/useSearchFiltersBarHelpers.test.ts          | 3 ++-
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/Day.tsx b/src/components/DatePicker/CalendarPicker/Day.tsx
index 85fbe2af095c0..f9f45c0b533ab 100644
--- a/src/components/DatePicker/CalendarPicker/Day.tsx
+++ b/src/components/DatePicker/CalendarPicker/Day.tsx
@@ -29,15 +29,12 @@ function Day({disabled, selected, pressed, hovered, children}: DayProps) {
     const StyleUtils = useStyleUtils();
     return (
         <View
-            // Prevent Android from flattening this View, which can cause
-            // background color changes (day selection) to not trigger a native repaint.
-            collapsable={false}
             style={[
                 themeStyles.calendarDayContainer,
                 // Always provide an explicit backgroundColor so Android (which
                 // does not reset a property when the style changes to {})
                 // correctly transitions the selection highlight on every render.
-                {backgroundColor: selected ? theme.success : 'transparent'},
+                {backgroundColor: selected ? theme.success : theme.transparent},
                 !disabled && !selected ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed), true) : {},
             ]}
         >
diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
index 7bee7379d62fc..26b2909899d29 100644
--- a/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
+++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {Keyboard, Platform} from 'react-native';
+import {Keyboard} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -54,7 +54,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             headerMessage,
             maxLength: 4,
             inputMode: CONST.INPUT_MODE.NUMERIC,
-            disableAutoFocus: Platform.OS === CONST.PLATFORM.ANDROID,
         }),
         [headerMessage, searchText, translate],
     );
@@ -74,7 +73,6 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 enableEdgeToEdgeBottomSafeAreaPadding
-                shouldEnablePickerAvoiding={false}
                 testID="YearPickerModal"
             >
                 <HeaderWithBackButton
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index db61331d4a1ba..a5879ae06ec87 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -177,7 +177,10 @@ function DateFilterBase({
                     onBackButtonPress={goBack}
                 />
             )}
-            <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+            <ScrollView
+                keyboardShouldPersistTaps="handled"
+                contentContainerStyle={[styles.flexGrow1]}
+            >
                 <DatePresetFilterBase
                     ref={searchDatePresetFilterBaseRef}
                     defaultDateValues={normalizedDefaultDateValues}
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 63df58291e92a..722c57d354f88 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -269,6 +269,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             {!selectedDateModifier && <Text style={mobileLabelStyle}>{label}</Text>}
             <ScrollView
                 ref={scrollViewRef}
+                keyboardShouldPersistTaps="handled"
                 style={useRangeLayout ? [styles.flexGrow1] : undefined}
                 contentContainerStyle={useRangeLayout ? [!selectedDateModifier && styles.pt4, selectedDateModifier && styles.pt0] : undefined}
             >
diff --git a/src/components/Search/SearchLoadingSkeleton.tsx b/src/components/Search/SearchLoadingSkeleton.tsx
index 4dc4bbf9f2c32..908ce44d8c7ae 100644
--- a/src/components/Search/SearchLoadingSkeleton.tsx
+++ b/src/components/Search/SearchLoadingSkeleton.tsx
@@ -14,6 +14,7 @@ type SearchLoadingSkeletonProps = {
 
 function SearchLoadingSkeleton({containerStyle, reasonAttributes}: SearchLoadingSkeletonProps) {
     const styles = useThemeStyles();
+    const skeletonReasonAttributes = reasonAttributes ?? {context: 'SearchLoadingSkeleton'};
 
     return (
         <Animated.View
@@ -27,7 +28,7 @@ function SearchLoadingSkeleton({containerStyle, reasonAttributes}: SearchLoading
             <SearchRowSkeleton
                 shouldAnimate
                 containerStyle={containerStyle}
-                reasonAttributes={reasonAttributes}
+                reasonAttributes={skeletonReasonAttributes}
             />
         </Animated.View>
     );
diff --git a/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts b/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
index 5bcf8ec785b26..dad217ca504e5 100644
--- a/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
+++ b/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
@@ -1,9 +1,10 @@
+import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 import {createDateDisplayValue, hasDateFilterValue} from '@components/Search/SearchPageHeader/useSearchFiltersBar';
 import CONST from '@src/CONST';
 
 describe('useSearchFiltersBar helpers', () => {
     it('includes a readable range display value when range is set', () => {
-        const translate = (key: string) => key;
+        const translate = ((path: string) => path) as unknown as LocalizedTranslate;
 
         const [dateValues, displayValues] = createDateDisplayValue(
             {

From f3af17881d2629e0177068680052bbc57bd9e347 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 19 Mar 2026 01:10:50 +0530
Subject: [PATCH 07/16] fix: Advanced filter reset

---
 .../FilterComponents/DateFilterBase.tsx       |   4 +-
 .../FilterDropdowns/DateSelectPopup.tsx       |   8 +-
 .../Search/DateFilterResetFlows.test.tsx      | 307 ++++++++++++++++++
 3 files changed, 315 insertions(+), 4 deletions(-)
 create mode 100644 tests/ui/components/Search/DateFilterResetFlows.test.tsx

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index a5879ae06ec87..837950276441a 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -136,13 +136,15 @@ function DateFilterBase({
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            setSelectedDateModifier(null);
             setShouldShowRangeError(false);
+            onDateModifierChange?.(false);
             return;
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
         setShouldShowRangeError(false);
-    }, [selectedDateModifier]);
+    }, [onDateModifierChange, selectedDateModifier]);
 
     const save = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 722c57d354f88..c559336629d1c 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -196,8 +196,10 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            updateRangeText();
-            setShouldShowRangeError(false);
+            const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+            clearSelection();
+            onChange(dateValues);
+            closeOverlay();
             return;
         }
 
@@ -206,7 +208,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         setShouldShowRangeError(false);
         onChange(searchDatePresetFilterBaseRef.current.getDateValues());
         closeOverlay();
-    }, [closeOverlay, onChange, selectedDateModifier, updateRangeText]);
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
 
     const maxPopupHeight = Math.round(windowHeight * 0.875);
 
diff --git a/tests/ui/components/Search/DateFilterResetFlows.test.tsx b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
new file mode 100644
index 0000000000000..0120aac370a43
--- /dev/null
+++ b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
@@ -0,0 +1,307 @@
+/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, no-restricted-imports, react/no-unused-prop-types */
+import {fireEvent, render, screen} from '@testing-library/react-native';
+import React from 'react';
+import type {ReactNode} from 'react';
+import type * as ReactNativeModule from 'react-native';
+import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
+import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
+import CONST from '@src/CONST';
+
+const createEmptyDateValues = (): SearchDateValues => ({
+    [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+    [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+    [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+    [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+});
+
+const mockStyles = new Proxy(
+    {},
+    {
+        get: () => ({}),
+    },
+);
+const mockReactNative = require('react-native') as typeof ReactNativeModule;
+
+let mockCurrentDateValues: SearchDateValues = createEmptyDateValues();
+let mockLatestDatePresetFilterBaseProps: {
+    selectedDateModifier?: string | null;
+    onDateValuesChange?: (values: SearchDateValues) => void;
+} | null = null;
+
+const mockGetDateValues = jest.fn<SearchDateValues, []>();
+const mockGetRangeDisplayText = jest.fn<string, []>();
+const mockClearDateValues = jest.fn();
+const mockSetDateValueOfSelectedDateModifier = jest.fn();
+const mockClearDateValueOfSelectedDateModifier = jest.fn();
+const mockRestoreRangeToEntrySnapshot = jest.fn();
+const mockResetDateValuesToDefault = jest.fn();
+const mockValidate = jest.fn<boolean, []>();
+
+jest.mock('@hooks/useLocalize', () => ({
+    __esModule: true,
+    default: () => ({
+        translate: (key: string) => key,
+    }),
+}));
+
+jest.mock('@hooks/useThemeStyles', () => ({
+    __esModule: true,
+    default: () => mockStyles,
+}));
+
+jest.mock('@hooks/useTheme', () => ({
+    __esModule: true,
+    default: () => ({
+        icon: '#000000',
+    }),
+}));
+
+jest.mock('@hooks/useResponsiveLayout', () => ({
+    __esModule: true,
+    default: () => ({
+        isSmallScreenWidth: false,
+    }),
+}));
+
+jest.mock('@hooks/useWindowDimensions', () => ({
+    __esModule: true,
+    default: () => ({
+        windowHeight: 800,
+    }),
+}));
+
+jest.mock('@hooks/useLazyAsset', () => ({
+    __esModule: true,
+    useMemoizedLazyExpensifyIcons: () => ({
+        BackArrow: 'BackArrow',
+    }),
+}));
+
+jest.mock('@components/Button', () => ({
+    __esModule: true,
+    default: ({text, onPress, sentryLabel}: {text: string; onPress?: () => void; sentryLabel?: string}) => (
+        <mockReactNative.Pressable
+            accessibilityRole="button"
+            onPress={onPress}
+            testID={sentryLabel}
+        >
+            <mockReactNative.Text>{text}</mockReactNative.Text>
+        </mockReactNative.Pressable>
+    ),
+}));
+
+jest.mock('@components/FormAlertWithSubmitButton', () => ({
+    __esModule: true,
+    default: ({buttonText, onSubmit}: {buttonText: string; onSubmit?: () => void}) => (
+        <mockReactNative.Pressable
+            accessibilityRole="button"
+            onPress={onSubmit}
+        >
+            <mockReactNative.Text>{buttonText}</mockReactNative.Text>
+        </mockReactNative.Pressable>
+    ),
+}));
+
+jest.mock('@components/HeaderWithBackButton', () => ({
+    __esModule: true,
+    default: ({title, subtitle, onBackButtonPress}: {title?: string; subtitle?: string; onBackButtonPress?: () => void}) => (
+        <mockReactNative.View>
+            {!!title && <mockReactNative.Text>{title}</mockReactNative.Text>}
+            {!!subtitle && <mockReactNative.Text>{subtitle}</mockReactNative.Text>}
+            <mockReactNative.Pressable
+                accessibilityRole="button"
+                onPress={onBackButtonPress}
+            >
+                <mockReactNative.Text>back</mockReactNative.Text>
+            </mockReactNative.Pressable>
+        </mockReactNative.View>
+    ),
+}));
+
+jest.mock('@components/ScrollView', () => ({
+    __esModule: true,
+    default: ({children}: {children?: ReactNode}) => <mockReactNative.View>{children}</mockReactNative.View>,
+}));
+
+jest.mock('@components/Icon', () => ({
+    __esModule: true,
+    default: () => null,
+}));
+
+jest.mock('@components/Pressable/PressableWithoutFeedback', () => ({
+    __esModule: true,
+    default: ({children, onPress}: {children?: ReactNode; onPress?: () => void}) => (
+        <mockReactNative.Pressable
+            accessibilityRole="button"
+            onPress={onPress}
+        >
+            <mockReactNative.Text>{children}</mockReactNative.Text>
+        </mockReactNative.Pressable>
+    ),
+}));
+
+jest.mock('@components/Text', () => ({
+    __esModule: true,
+    default: ({children, testID}: {children?: ReactNode; testID?: string}) => <mockReactNative.Text testID={testID}>{children}</mockReactNative.Text>,
+}));
+
+jest.mock('@libs/SearchQueryUtils', () => ({
+    __esModule: true,
+    getDateModifierTitle: (dateModifier: string | null, title: string) => dateModifier ?? title,
+    getDateRangeDisplayValueFromFormValue: (range?: string) => range ?? '',
+    getEmptyDateValues: () => ({
+        on: undefined,
+        after: undefined,
+        before: undefined,
+        range: undefined,
+    }),
+}));
+
+jest.mock('@components/Search/FilterComponents/DatePresetFilterBase', () => {
+    const ReactModule = require('react') as typeof React;
+    const {Pressable: NativePressable, Text: NativeText, View: NativeView} = require('react-native') as typeof ReactNativeModule;
+    const CONSTModule = require('@src/CONST').default as {
+        SEARCH: {
+            DATE_MODIFIERS: {
+                RANGE: string;
+            };
+        };
+    };
+
+    function MockDatePresetFilterBase({
+        ref,
+        selectedDateModifier,
+        onSelectDateModifier,
+        onDateValuesChange,
+    }: {
+        ref?: React.Ref<unknown>;
+        selectedDateModifier: string | null;
+        onSelectDateModifier: (dateModifier: string | null) => void;
+        onDateValuesChange?: (values: SearchDateValues) => void;
+    }) {
+        ReactModule.useEffect(() => {
+            mockLatestDatePresetFilterBaseProps = {
+                selectedDateModifier,
+                onDateValuesChange,
+            };
+        }, [onDateValuesChange, selectedDateModifier]);
+
+        ReactModule.useImperativeHandle(ref, () => ({
+            getDateValues: mockGetDateValues,
+            getRangeDisplayText: mockGetRangeDisplayText,
+            clearDateValues: mockClearDateValues,
+            setDateValueOfSelectedDateModifier: mockSetDateValueOfSelectedDateModifier,
+            clearDateValueOfSelectedDateModifier: mockClearDateValueOfSelectedDateModifier,
+            restoreRangeToEntrySnapshot: mockRestoreRangeToEntrySnapshot,
+            resetDateValuesToDefault: mockResetDateValuesToDefault,
+            validate: mockValidate,
+        }));
+
+        return (
+            <NativeView>
+                <NativeText testID="selected-date-modifier">{selectedDateModifier ?? 'none'}</NativeText>
+                <NativePressable
+                    testID="select-range"
+                    onPress={() => onSelectDateModifier(CONSTModule.SEARCH.DATE_MODIFIERS.RANGE)}
+                >
+                    <NativeText>Select range</NativeText>
+                </NativePressable>
+            </NativeView>
+        );
+    }
+
+    return {
+        __esModule: true,
+        default: MockDatePresetFilterBase,
+    };
+});
+
+describe('Date filter reset flows', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockCurrentDateValues = {
+            ...createEmptyDateValues(),
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: '2024-01-01:2024-01-31',
+        };
+        mockLatestDatePresetFilterBaseProps = null;
+
+        mockGetDateValues.mockImplementation(() => mockCurrentDateValues);
+        mockGetRangeDisplayText.mockImplementation(() => mockCurrentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? '');
+        mockValidate.mockImplementation(() => !!mockCurrentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]);
+        mockClearDateValues.mockImplementation(() => {
+            mockCurrentDateValues = createEmptyDateValues();
+            mockLatestDatePresetFilterBaseProps?.onDateValuesChange?.(mockCurrentDateValues);
+        });
+        mockClearDateValueOfSelectedDateModifier.mockImplementation(() => {
+            const selectedDateModifier = mockLatestDatePresetFilterBaseProps?.selectedDateModifier;
+
+            if (!selectedDateModifier) {
+                return;
+            }
+
+            mockCurrentDateValues = {
+                ...mockCurrentDateValues,
+                [selectedDateModifier]: undefined,
+            };
+            mockLatestDatePresetFilterBaseProps?.onDateValuesChange?.(mockCurrentDateValues);
+        });
+    });
+
+    it('lets DateFilterBase save a cleared range after reset exits modifier mode', () => {
+        const onSubmit = jest.fn();
+        const onDateModifierChange = jest.fn();
+
+        render(
+            <DateFilterBase
+                defaultDateValues={mockCurrentDateValues}
+                presets={[]}
+                onSubmit={onSubmit}
+                onDateModifierChange={onDateModifierChange}
+            />,
+        );
+
+        fireEvent.press(screen.getByTestId('select-range'));
+
+        expect(screen.getByTestId('selected-date-modifier').props.children).toBe(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+
+        fireEvent.press(screen.getByText('common.reset'));
+
+        expect(mockClearDateValueOfSelectedDateModifier).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('selected-date-modifier').props.children).toBe('none');
+        expect(onDateModifierChange).toHaveBeenLastCalledWith(false);
+
+        fireEvent.press(screen.getByText('common.save'));
+
+        expect(onSubmit).toHaveBeenCalledWith({
+            ...createEmptyDateValues(),
+        });
+    });
+
+    it('propagates a cleared range and closes the popup when reset from DateSelectPopup modifier view', () => {
+        const onChange = jest.fn();
+        const closeOverlay = jest.fn();
+
+        render(
+            <DateSelectPopup
+                label="Date"
+                value={mockCurrentDateValues}
+                onChange={onChange}
+                closeOverlay={closeOverlay}
+            />,
+        );
+
+        fireEvent.press(screen.getByTestId('select-range'));
+
+        expect(screen.getByTestId('selected-date-modifier').props.children).toBe(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+
+        fireEvent.press(screen.getByText('common.reset'));
+
+        expect(mockClearDateValueOfSelectedDateModifier).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('selected-date-modifier').props.children).toBe('none');
+        expect(onChange).toHaveBeenCalledWith({
+            ...createEmptyDateValues(),
+        });
+        expect(closeOverlay).toHaveBeenCalledTimes(1);
+    });
+});

From d854556de81c22398b59ef1ce3b2877fc0b37674 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 19 Mar 2026 11:08:21 +0530
Subject: [PATCH 08/16] fix: Use single source of SearchDateValues type

---
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx      | 3 ++-
 .../Search/SearchPageHeader/DatePickerFilterPopup.tsx          | 2 +-
 src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx | 2 +-
 tests/ui/components/Search/DateFilterResetFlows.test.tsx       | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index c559336629d1c..3f9459ab3750e 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -6,7 +6,8 @@ import Icon from '@components/Icon';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ScrollView from '@components/ScrollView';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
-import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import type {SearchDatePresetFilterBaseHandle} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import type {SearchDatePreset} from '@components/Search/types';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
diff --git a/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx b/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
index b0edc148ab321..7ef5b516b1769 100644
--- a/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
+++ b/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type {SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
 import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
 import type {SearchDateFilterKeys} from '@components/Search/types';
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index b8b3079e919ae..eb7f4f18694ba 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -4,7 +4,7 @@ import type {ReactNode} from 'react';
 import type {OnyxCollection} from 'react-native-onyx';
 import type {TupleToUnion} from 'type-fest';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
-import type {SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
 import GroupByPopup from '@components/Search/FilterDropdowns/GroupByPopup';
 import type {MultiSelectItem} from '@components/Search/FilterDropdowns/MultiSelectPopup';
diff --git a/tests/ui/components/Search/DateFilterResetFlows.test.tsx b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
index 0120aac370a43..d7966f03170cb 100644
--- a/tests/ui/components/Search/DateFilterResetFlows.test.tsx
+++ b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import type {ReactNode} from 'react';
 import type * as ReactNativeModule from 'react-native';
 import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
-import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
 import type {SearchDateValues} from '@libs/SearchQueryUtils';
+import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
 import CONST from '@src/CONST';
 
 const createEmptyDateValues = (): SearchDateValues => ({

From 31921ca3c0880e83885d02d5ccca8144ce4d90ef Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 19 Mar 2026 11:12:06 +0530
Subject: [PATCH 09/16] prettify

---
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx       | 2 +-
 .../Search/SearchPageHeader/DatePickerFilterPopup.tsx           | 2 +-
 src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx  | 2 +-
 tests/ui/components/Search/DateFilterResetFlows.test.tsx        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 3f9459ab3750e..4100998aaabdf 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -7,7 +7,6 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import ScrollView from '@components/ScrollView';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePresetFilterBaseHandle} from '@components/Search/FilterComponents/DatePresetFilterBase';
-import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import type {SearchDatePreset} from '@components/Search/types';
 import Text from '@components/Text';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -16,6 +15,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
diff --git a/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx b/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
index 7ef5b516b1769..5111428a419dd 100644
--- a/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
+++ b/src/components/Search/SearchPageHeader/DatePickerFilterPopup.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
 import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
 import type {SearchDateFilterKeys} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index eb7f4f18694ba..2b7f976b891ad 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -4,7 +4,6 @@ import type {ReactNode} from 'react';
 import type {OnyxCollection} from 'react-native-onyx';
 import type {TupleToUnion} from 'type-fest';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
-import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
 import GroupByPopup from '@components/Search/FilterDropdowns/GroupByPopup';
 import type {MultiSelectItem} from '@components/Search/FilterDropdowns/MultiSelectPopup';
@@ -30,6 +29,7 @@ import {updateAdvancedFilters} from '@libs/actions/Search';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {buildFilterQueryWithSortDefaults, getDateRangeDisplayValueFromFormValue, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {
     filterValidHasValues,
diff --git a/tests/ui/components/Search/DateFilterResetFlows.test.tsx b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
index d7966f03170cb..0120aac370a43 100644
--- a/tests/ui/components/Search/DateFilterResetFlows.test.tsx
+++ b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 import type {ReactNode} from 'react';
 import type * as ReactNativeModule from 'react-native';
 import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
-import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
+import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 
 const createEmptyDateValues = (): SearchDateValues => ({

From ebb6b78c3e4d0afb9a7d1cbf4628ea6328f1771b Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 19 Mar 2026 11:49:30 +0530
Subject: [PATCH 10/16] fix: polish translation, test fix

---
 src/languages/pl.ts                                 | 2 +-
 tests/unit/hooks/useSearchFiltersBarHelpers.test.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 9b3f9041d6d31..2a53a3cbdef26 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -483,7 +483,7 @@ const translations: TranslationDeepObject<typeof en> = {
         status: 'Status',
         on: 'Włączone',
         before: 'Przed',
-        after: 'PoPo',
+        after: 'Po',
         range: 'Zakres',
         reschedule: 'Przełóż',
         general: 'Ogólne',
diff --git a/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts b/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
index dad217ca504e5..f9ad4a1ed39f9 100644
--- a/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
+++ b/tests/unit/hooks/useSearchFiltersBarHelpers.test.ts
@@ -19,9 +19,9 @@ describe('useSearchFiltersBar helpers', () => {
 
     it('prefers range when on/after/before are empty for hidden date filter checks', () => {
         const filterFormValues = {
-            postedRange: '2026-02-01,2026-02-29',
+            postedRange: '2026-02-01,2026-02-28',
         };
 
-        expect(hasDateFilterValue(filterFormValues, CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED)).toBe('2026-02-01,2026-02-29');
+        expect(hasDateFilterValue(filterFormValues, CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED)).toBe('2026-02-01,2026-02-28');
     });
 });

From a460410b93c9394c45ec6a7347074cda175bc645 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Mon, 23 Mar 2026 10:46:29 +0530
Subject: [PATCH 11/16] fix: advanced filter date reset and sub page navigation

---
 src/CONST/index.ts                            |  1 +
 .../Search/SearchDatePresetFilterBasePage.tsx | 25 +++++++++++++------
 .../SearchPageHeader/useSearchFiltersBar.tsx  |  2 +-
 src/hooks/useSearchFilterSync.ts              | 19 +++++++++++++-
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 749ebf9106eb9..f89fe7f34ce4c 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -7849,6 +7849,7 @@ const CONST = {
             ON: 'on',
             AFTER: 'after',
             BEFORE: 'before',
+            RANGE: 'range',
         },
         AMOUNT_MODIFIERS: {
             LESS_THAN: 'LessThan',
diff --git a/src/components/Search/SearchDatePresetFilterBasePage.tsx b/src/components/Search/SearchDatePresetFilterBasePage.tsx
index 74e7d5c9c93e1..5852acaa81aa0 100644
--- a/src/components/Search/SearchDatePresetFilterBasePage.tsx
+++ b/src/components/Search/SearchDatePresetFilterBasePage.tsx
@@ -16,7 +16,7 @@ import ROUTES from '@src/ROUTES';
 import type {SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import DateFilterBase from './FilterComponents/DateFilterBase';
-import type {ReportFieldDateKey, SearchDateFilterKeys, SearchFilterKey} from './types';
+import type {SearchDateFilterKeys, SearchFilterKey} from './types';
 
 type SearchDatePresetFilterBasePageProps = {
     /** Key used for the date filter */
@@ -76,6 +76,8 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
         selectedDateModifier = CONST.SEARCH.DATE_MODIFIERS.AFTER;
     } else if (params?.subPage === CONST.SEARCH.DATE_FILTER_SUB_PAGE.BEFORE) {
         selectedDateModifier = CONST.SEARCH.DATE_MODIFIERS.BEFORE;
+    } else if (params?.subPage === CONST.SEARCH.DATE_FILTER_SUB_PAGE.RANGE) {
+        selectedDateModifier = CONST.SEARCH.DATE_MODIFIERS.RANGE;
     }
 
     const selectDateModifier = useCallback(
@@ -85,19 +87,28 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
                 return;
             }
 
+            let newSubPage: string;
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON) {
-                Navigation.navigate(buildSubPageRoute(CONST.SEARCH.DATE_FILTER_SUB_PAGE.ON));
-                return;
+                newSubPage = CONST.SEARCH.DATE_FILTER_SUB_PAGE.ON;
+            } else if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER) {
+                newSubPage = CONST.SEARCH.DATE_FILTER_SUB_PAGE.AFTER;
+            } else if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                newSubPage = CONST.SEARCH.DATE_FILTER_SUB_PAGE.RANGE;
+            } else {
+                newSubPage = CONST.SEARCH.DATE_FILTER_SUB_PAGE.BEFORE;
             }
 
-            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER) {
-                Navigation.navigate(buildSubPageRoute(CONST.SEARCH.DATE_FILTER_SUB_PAGE.AFTER));
+            // When already on a date modifier subPage, update route params in-place instead of
+            // pushing a new screen. This avoids a side-by-side slide animation and preserves
+            // ephemeral date state (the calendar value) across modifier switches.
+            if (params?.subPage) {
+                Navigation.setParams({subPage: newSubPage});
                 return;
             }
 
-            Navigation.navigate(buildSubPageRoute(CONST.SEARCH.DATE_FILTER_SUB_PAGE.BEFORE));
+            Navigation.navigate(buildSubPageRoute(newSubPage));
         },
-        [buildSubPageRoute],
+        [buildSubPageRoute, params?.subPage],
     );
 
     const defaultDateValues = getDefaultDateValues();
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 2b7f976b891ad..f4349b8f36983 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -298,7 +298,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     };
 
     const openAdvancedFilters = () => {
-        updateAdvancedFilters(filterFormValues);
+        updateAdvancedFilters(filterFormValues, true);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
     };
 
diff --git a/src/hooks/useSearchFilterSync.ts b/src/hooks/useSearchFilterSync.ts
index 806f5cd378cd8..b785d31819214 100644
--- a/src/hooks/useSearchFilterSync.ts
+++ b/src/hooks/useSearchFilterSync.ts
@@ -1,5 +1,5 @@
 import {useIsFocused} from '@react-navigation/native';
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {updateAdvancedFilters} from '@libs/actions/Search';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 
@@ -11,14 +11,31 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
  * The isFocused guard prevents the blurred (previous) SearchPage instance—kept
  * mounted during navigation transition animations—from overwriting the Onyx form
  * state that was already written by the newly focused instance.
+ *
+ * On narrow layout (iOS native), navigating to Advanced Filters causes this screen
+ * to lose focus. When the user returns, the screen regains focus and this effect
+ * would re-fire. Without the prevIsFocusedRef guard below, it would overwrite any
+ * form changes made by Advanced Filters (e.g. resetting a date range) with stale
+ * values derived from the unchanged URL query parameter.
  */
 function useSearchFilterSync(formValues: Partial<SearchAdvancedFiltersForm>) {
     const isFocused = useIsFocused();
+    const prevIsFocusedRef = useRef(isFocused);
 
     useEffect(() => {
+        const wasPreviouslyFocused = prevIsFocusedRef.current;
+        prevIsFocusedRef.current = isFocused;
+
         if (!isFocused) {
             return;
         }
+
+        // Skip syncing when just regaining focus to avoid overwriting form
+        // changes made while this screen was unfocused (e.g. Advanced Filters).
+        if (!wasPreviouslyFocused) {
+            return;
+        }
+
         updateAdvancedFilters(formValues, true);
     }, [formValues, isFocused]);
 }

From a583502ab63c3928ec54aeb8d5f772254a5319a5 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 24 Mar 2026 12:05:01 +0530
Subject: [PATCH 12/16] fix: back to previous state if date is not selected

---
 .../Search/FilterComponents/DatePresetFilterBase.tsx          | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 23092a81fd8a6..4e5f7601b4455 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -337,6 +337,10 @@ function DatePresetFilterBase({
 
                 const updatedValue =
                     selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE ? getRangeQueryValue(rangeEphemeralValues.from, rangeEphemeralValues.to) || undefined : ephemeralDateValue;
+                if (updatedValue === undefined) {
+                    return;
+                }
+
                 updateDateValues(getExclusiveDateValues(selectedDateModifier, updatedValue));
             },
 

From 44f69753c1af495f85f98bf26ac0839baf28cbdd Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Mar 2026 12:29:47 +0530
Subject: [PATCH 13/16] fix: remove suggested files

---
 .../Search/DateFilterResetFlows.test.tsx      | 307 ------------------
 .../CONST/searchDateRangeConstants.test.ts    |  17 -
 2 files changed, 324 deletions(-)
 delete mode 100644 tests/ui/components/Search/DateFilterResetFlows.test.tsx
 delete mode 100644 tests/unit/CONST/searchDateRangeConstants.test.ts

diff --git a/tests/ui/components/Search/DateFilterResetFlows.test.tsx b/tests/ui/components/Search/DateFilterResetFlows.test.tsx
deleted file mode 100644
index 0120aac370a43..0000000000000
--- a/tests/ui/components/Search/DateFilterResetFlows.test.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, no-restricted-imports, react/no-unused-prop-types */
-import {fireEvent, render, screen} from '@testing-library/react-native';
-import React from 'react';
-import type {ReactNode} from 'react';
-import type * as ReactNativeModule from 'react-native';
-import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
-import DateSelectPopup from '@components/Search/FilterDropdowns/DateSelectPopup';
-import type {SearchDateValues} from '@libs/SearchQueryUtils';
-import CONST from '@src/CONST';
-
-const createEmptyDateValues = (): SearchDateValues => ({
-    [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-    [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-    [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-    [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-});
-
-const mockStyles = new Proxy(
-    {},
-    {
-        get: () => ({}),
-    },
-);
-const mockReactNative = require('react-native') as typeof ReactNativeModule;
-
-let mockCurrentDateValues: SearchDateValues = createEmptyDateValues();
-let mockLatestDatePresetFilterBaseProps: {
-    selectedDateModifier?: string | null;
-    onDateValuesChange?: (values: SearchDateValues) => void;
-} | null = null;
-
-const mockGetDateValues = jest.fn<SearchDateValues, []>();
-const mockGetRangeDisplayText = jest.fn<string, []>();
-const mockClearDateValues = jest.fn();
-const mockSetDateValueOfSelectedDateModifier = jest.fn();
-const mockClearDateValueOfSelectedDateModifier = jest.fn();
-const mockRestoreRangeToEntrySnapshot = jest.fn();
-const mockResetDateValuesToDefault = jest.fn();
-const mockValidate = jest.fn<boolean, []>();
-
-jest.mock('@hooks/useLocalize', () => ({
-    __esModule: true,
-    default: () => ({
-        translate: (key: string) => key,
-    }),
-}));
-
-jest.mock('@hooks/useThemeStyles', () => ({
-    __esModule: true,
-    default: () => mockStyles,
-}));
-
-jest.mock('@hooks/useTheme', () => ({
-    __esModule: true,
-    default: () => ({
-        icon: '#000000',
-    }),
-}));
-
-jest.mock('@hooks/useResponsiveLayout', () => ({
-    __esModule: true,
-    default: () => ({
-        isSmallScreenWidth: false,
-    }),
-}));
-
-jest.mock('@hooks/useWindowDimensions', () => ({
-    __esModule: true,
-    default: () => ({
-        windowHeight: 800,
-    }),
-}));
-
-jest.mock('@hooks/useLazyAsset', () => ({
-    __esModule: true,
-    useMemoizedLazyExpensifyIcons: () => ({
-        BackArrow: 'BackArrow',
-    }),
-}));
-
-jest.mock('@components/Button', () => ({
-    __esModule: true,
-    default: ({text, onPress, sentryLabel}: {text: string; onPress?: () => void; sentryLabel?: string}) => (
-        <mockReactNative.Pressable
-            accessibilityRole="button"
-            onPress={onPress}
-            testID={sentryLabel}
-        >
-            <mockReactNative.Text>{text}</mockReactNative.Text>
-        </mockReactNative.Pressable>
-    ),
-}));
-
-jest.mock('@components/FormAlertWithSubmitButton', () => ({
-    __esModule: true,
-    default: ({buttonText, onSubmit}: {buttonText: string; onSubmit?: () => void}) => (
-        <mockReactNative.Pressable
-            accessibilityRole="button"
-            onPress={onSubmit}
-        >
-            <mockReactNative.Text>{buttonText}</mockReactNative.Text>
-        </mockReactNative.Pressable>
-    ),
-}));
-
-jest.mock('@components/HeaderWithBackButton', () => ({
-    __esModule: true,
-    default: ({title, subtitle, onBackButtonPress}: {title?: string; subtitle?: string; onBackButtonPress?: () => void}) => (
-        <mockReactNative.View>
-            {!!title && <mockReactNative.Text>{title}</mockReactNative.Text>}
-            {!!subtitle && <mockReactNative.Text>{subtitle}</mockReactNative.Text>}
-            <mockReactNative.Pressable
-                accessibilityRole="button"
-                onPress={onBackButtonPress}
-            >
-                <mockReactNative.Text>back</mockReactNative.Text>
-            </mockReactNative.Pressable>
-        </mockReactNative.View>
-    ),
-}));
-
-jest.mock('@components/ScrollView', () => ({
-    __esModule: true,
-    default: ({children}: {children?: ReactNode}) => <mockReactNative.View>{children}</mockReactNative.View>,
-}));
-
-jest.mock('@components/Icon', () => ({
-    __esModule: true,
-    default: () => null,
-}));
-
-jest.mock('@components/Pressable/PressableWithoutFeedback', () => ({
-    __esModule: true,
-    default: ({children, onPress}: {children?: ReactNode; onPress?: () => void}) => (
-        <mockReactNative.Pressable
-            accessibilityRole="button"
-            onPress={onPress}
-        >
-            <mockReactNative.Text>{children}</mockReactNative.Text>
-        </mockReactNative.Pressable>
-    ),
-}));
-
-jest.mock('@components/Text', () => ({
-    __esModule: true,
-    default: ({children, testID}: {children?: ReactNode; testID?: string}) => <mockReactNative.Text testID={testID}>{children}</mockReactNative.Text>,
-}));
-
-jest.mock('@libs/SearchQueryUtils', () => ({
-    __esModule: true,
-    getDateModifierTitle: (dateModifier: string | null, title: string) => dateModifier ?? title,
-    getDateRangeDisplayValueFromFormValue: (range?: string) => range ?? '',
-    getEmptyDateValues: () => ({
-        on: undefined,
-        after: undefined,
-        before: undefined,
-        range: undefined,
-    }),
-}));
-
-jest.mock('@components/Search/FilterComponents/DatePresetFilterBase', () => {
-    const ReactModule = require('react') as typeof React;
-    const {Pressable: NativePressable, Text: NativeText, View: NativeView} = require('react-native') as typeof ReactNativeModule;
-    const CONSTModule = require('@src/CONST').default as {
-        SEARCH: {
-            DATE_MODIFIERS: {
-                RANGE: string;
-            };
-        };
-    };
-
-    function MockDatePresetFilterBase({
-        ref,
-        selectedDateModifier,
-        onSelectDateModifier,
-        onDateValuesChange,
-    }: {
-        ref?: React.Ref<unknown>;
-        selectedDateModifier: string | null;
-        onSelectDateModifier: (dateModifier: string | null) => void;
-        onDateValuesChange?: (values: SearchDateValues) => void;
-    }) {
-        ReactModule.useEffect(() => {
-            mockLatestDatePresetFilterBaseProps = {
-                selectedDateModifier,
-                onDateValuesChange,
-            };
-        }, [onDateValuesChange, selectedDateModifier]);
-
-        ReactModule.useImperativeHandle(ref, () => ({
-            getDateValues: mockGetDateValues,
-            getRangeDisplayText: mockGetRangeDisplayText,
-            clearDateValues: mockClearDateValues,
-            setDateValueOfSelectedDateModifier: mockSetDateValueOfSelectedDateModifier,
-            clearDateValueOfSelectedDateModifier: mockClearDateValueOfSelectedDateModifier,
-            restoreRangeToEntrySnapshot: mockRestoreRangeToEntrySnapshot,
-            resetDateValuesToDefault: mockResetDateValuesToDefault,
-            validate: mockValidate,
-        }));
-
-        return (
-            <NativeView>
-                <NativeText testID="selected-date-modifier">{selectedDateModifier ?? 'none'}</NativeText>
-                <NativePressable
-                    testID="select-range"
-                    onPress={() => onSelectDateModifier(CONSTModule.SEARCH.DATE_MODIFIERS.RANGE)}
-                >
-                    <NativeText>Select range</NativeText>
-                </NativePressable>
-            </NativeView>
-        );
-    }
-
-    return {
-        __esModule: true,
-        default: MockDatePresetFilterBase,
-    };
-});
-
-describe('Date filter reset flows', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-        mockCurrentDateValues = {
-            ...createEmptyDateValues(),
-            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: '2024-01-01:2024-01-31',
-        };
-        mockLatestDatePresetFilterBaseProps = null;
-
-        mockGetDateValues.mockImplementation(() => mockCurrentDateValues);
-        mockGetRangeDisplayText.mockImplementation(() => mockCurrentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? '');
-        mockValidate.mockImplementation(() => !!mockCurrentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]);
-        mockClearDateValues.mockImplementation(() => {
-            mockCurrentDateValues = createEmptyDateValues();
-            mockLatestDatePresetFilterBaseProps?.onDateValuesChange?.(mockCurrentDateValues);
-        });
-        mockClearDateValueOfSelectedDateModifier.mockImplementation(() => {
-            const selectedDateModifier = mockLatestDatePresetFilterBaseProps?.selectedDateModifier;
-
-            if (!selectedDateModifier) {
-                return;
-            }
-
-            mockCurrentDateValues = {
-                ...mockCurrentDateValues,
-                [selectedDateModifier]: undefined,
-            };
-            mockLatestDatePresetFilterBaseProps?.onDateValuesChange?.(mockCurrentDateValues);
-        });
-    });
-
-    it('lets DateFilterBase save a cleared range after reset exits modifier mode', () => {
-        const onSubmit = jest.fn();
-        const onDateModifierChange = jest.fn();
-
-        render(
-            <DateFilterBase
-                defaultDateValues={mockCurrentDateValues}
-                presets={[]}
-                onSubmit={onSubmit}
-                onDateModifierChange={onDateModifierChange}
-            />,
-        );
-
-        fireEvent.press(screen.getByTestId('select-range'));
-
-        expect(screen.getByTestId('selected-date-modifier').props.children).toBe(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-
-        fireEvent.press(screen.getByText('common.reset'));
-
-        expect(mockClearDateValueOfSelectedDateModifier).toHaveBeenCalledTimes(1);
-        expect(screen.getByTestId('selected-date-modifier').props.children).toBe('none');
-        expect(onDateModifierChange).toHaveBeenLastCalledWith(false);
-
-        fireEvent.press(screen.getByText('common.save'));
-
-        expect(onSubmit).toHaveBeenCalledWith({
-            ...createEmptyDateValues(),
-        });
-    });
-
-    it('propagates a cleared range and closes the popup when reset from DateSelectPopup modifier view', () => {
-        const onChange = jest.fn();
-        const closeOverlay = jest.fn();
-
-        render(
-            <DateSelectPopup
-                label="Date"
-                value={mockCurrentDateValues}
-                onChange={onChange}
-                closeOverlay={closeOverlay}
-            />,
-        );
-
-        fireEvent.press(screen.getByTestId('select-range'));
-
-        expect(screen.getByTestId('selected-date-modifier').props.children).toBe(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-
-        fireEvent.press(screen.getByText('common.reset'));
-
-        expect(mockClearDateValueOfSelectedDateModifier).toHaveBeenCalledTimes(1);
-        expect(screen.getByTestId('selected-date-modifier').props.children).toBe('none');
-        expect(onChange).toHaveBeenCalledWith({
-            ...createEmptyDateValues(),
-        });
-        expect(closeOverlay).toHaveBeenCalledTimes(1);
-    });
-});
diff --git a/tests/unit/CONST/searchDateRangeConstants.test.ts b/tests/unit/CONST/searchDateRangeConstants.test.ts
deleted file mode 100644
index c9d939decfd0d..0000000000000
--- a/tests/unit/CONST/searchDateRangeConstants.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import CONST from '@src/CONST';
-
-describe('search date range constants', () => {
-    it('defines all new range-related constants', () => {
-        const reportFieldPrefixes = CONST.SEARCH.REPORT_FIELD as Record<string, string>;
-
-        expect(CONST.POPOVER_DATE_RANGE_WIDTH).toBe(672);
-        expect(CONST.SEARCH.SYNTAX_OPERATORS.RANGE).toBe('range');
-        expect(reportFieldPrefixes.RANGE_PREFIX).toBe('reportFieldRange-');
-        expect(CONST.SEARCH.DATE_MODIFIERS.RANGE).toBe('Range');
-    });
-
-    it('keeps custom date modifier list unchanged', () => {
-        expect(CONST.SEARCH.CUSTOM_DATE_MODIFIERS).toEqual([CONST.SEARCH.DATE_MODIFIERS.ON, CONST.SEARCH.DATE_MODIFIERS.BEFORE, CONST.SEARCH.DATE_MODIFIERS.AFTER]);
-        expect(CONST.SEARCH.CUSTOM_DATE_MODIFIERS).not.toContain(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-    });
-});

From ec9cf5e7b9272f354efa310f3da6860e791aa8e9 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Mar 2026 21:05:34 +0530
Subject: [PATCH 14/16] fix: pass range value to makeDateFilterItem in
 useSearchActionsBar

---
 .../Search/SearchPageHeader/useSearchActionsBar.tsx          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
index 5494539d8f5d0..3e6f9d31f0e9a 100644
--- a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
@@ -167,12 +167,14 @@ function makeDateFilterItem(
     on: string | undefined,
     after: string | undefined,
     before: string | undefined,
+    range: string | undefined,
     updateFilterForm: (v: Partial<SearchAdvancedFiltersForm>) => void,
 ): FilterItem {
     const value = {
         [CONST.SEARCH.DATE_MODIFIERS.ON]: on,
         [CONST.SEARCH.DATE_MODIFIERS.AFTER]: after,
         [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: before,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: range,
     };
     return {
         PopoverComponent: (props) => (
@@ -304,6 +306,7 @@ function useSearchActionsBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
                     searchAdvancedFiltersForm.postedOn,
                     searchAdvancedFiltersForm.postedAfter,
                     searchAdvancedFiltersForm.postedBefore,
+                    searchAdvancedFiltersForm.postedRange,
                     updateFilterForm,
                 );
             case FILTER_KEYS.WITHDRAWAL_TYPE: {
@@ -331,6 +334,7 @@ function useSearchActionsBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
                     searchAdvancedFiltersForm.withdrawnOn,
                     searchAdvancedFiltersForm.withdrawnAfter,
                     searchAdvancedFiltersForm.withdrawnBefore,
+                    searchAdvancedFiltersForm.withdrawnRange,
                     updateFilterForm,
                 );
             case FILTER_KEYS.STATUS: {
@@ -362,6 +366,7 @@ function useSearchActionsBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
                     searchAdvancedFiltersForm.dateOn,
                     searchAdvancedFiltersForm.dateAfter,
                     searchAdvancedFiltersForm.dateBefore,
+                    searchAdvancedFiltersForm.dateRange,
                     updateFilterForm,
                 );
             case FILTER_KEYS.FROM: {

From a02f4a06d5537268a7b3793959b3c7b443f6b3c1 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 1 Apr 2026 16:43:36 +0530
Subject: [PATCH 15/16] remove unwated prop

---
 .../Search/FilterComponents/DatePresetFilterBase.tsx       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 4e5f7601b4455..eef0e0739204b 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -99,9 +99,6 @@ type DatePresetFilterBaseProps = {
     /** Callback when date values change */
     onDateValuesChange?: (dateValues: SearchDateValues) => void;
 
-    /** Backward-compatible alias for onDateValuesChange */
-    onDateValueChange?: (dateValues: SearchDateValues) => void;
-
     /** Callback when range validation error changes */
     onRangeValidationErrorChange?: (shouldShowRangeError: boolean) => void;
 
@@ -127,7 +124,6 @@ function DatePresetFilterBase({
     isSearchAdvancedFiltersFormLoading,
     shouldShowRangeError = false,
     onDateValuesChange,
-    onDateValueChange,
     onRangeValidationErrorChange,
     forceVerticalCalendars = false,
     ref,
@@ -162,9 +158,8 @@ function DatePresetFilterBase({
     const notifyDateValuesChange = useCallback(
         (values: SearchDateValues) => {
             onDateValuesChange?.(values);
-            onDateValueChange?.(values);
         },
-        [onDateValueChange, onDateValuesChange],
+        [onDateValuesChange],
     );
 
     const [dateValues, setDateValues] = useState<SearchDateValues>(normalizedDefaultDateValues);

From 5495b77e6f7809e714cbb1bef9a30fe142e90825 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 1 Apr 2026 20:04:55 +0530
Subject: [PATCH 16/16] split dateselectpopup into multiple files

---
 .../DateSelectPopup/ActionButtons.tsx         | 41 ++++++++++
 .../SelectedDateModifierHeader.tsx            | 55 +++++++++++++
 .../index.tsx}                                | 82 +------------------
 3 files changed, 98 insertions(+), 80 deletions(-)
 create mode 100644 src/components/Search/FilterDropdowns/DateSelectPopup/ActionButtons.tsx
 create mode 100644 src/components/Search/FilterDropdowns/DateSelectPopup/SelectedDateModifierHeader.tsx
 rename src/components/Search/FilterDropdowns/{DateSelectPopup.tsx => DateSelectPopup/index.tsx} (80%)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/ActionButtons.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/ActionButtons.tsx
new file mode 100644
index 0000000000000..c54f1b411fb01
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/ActionButtons.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type ActionButtonsProps = {
+    containerStyle: React.ComponentProps<typeof View>['style'];
+    resetSentryLabel?: string;
+    applySentryLabel?: string;
+    onReset: () => void;
+    onApply: () => void;
+};
+
+function ActionButtons({containerStyle, resetSentryLabel, applySentryLabel, onReset, onApply}: ActionButtonsProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <View style={containerStyle}>
+            <Button
+                medium
+                style={[styles.flex1]}
+                text={translate('common.reset')}
+                onPress={onReset}
+                sentryLabel={resetSentryLabel}
+            />
+            <Button
+                success
+                medium
+                style={[styles.flex1]}
+                text={translate('common.apply')}
+                onPress={onApply}
+                sentryLabel={applySentryLabel}
+            />
+        </View>
+    );
+}
+
+export type {ActionButtonsProps};
+export default ActionButtons;
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/SelectedDateModifierHeader.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/SelectedDateModifierHeader.tsx
new file mode 100644
index 0000000000000..6d0ca35d67c51
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/SelectedDateModifierHeader.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import {View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type SelectedDateModifierHeaderProps = {
+    isCompact: boolean;
+    title: string;
+    onBackPress: () => void;
+};
+
+function SelectedDateModifierHeader({isCompact, title, onBackPress}: SelectedDateModifierHeaderProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const backArrowIcon = useMemoizedLazyExpensifyIcons(['BackArrow']);
+    const {translate} = useLocalize();
+
+    if (isCompact) {
+        return (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
+                <PressableWithoutFeedback
+                    onPress={onBackPress}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('common.back')}
+                    sentryLabel="DateSelectPopup-Back"
+                >
+                    <Icon
+                        src={backArrowIcon.BackArrow}
+                        fill={theme.icon}
+                    />
+                </PressableWithoutFeedback>
+                <Text style={[styles.textLabelSupporting]}>{title}</Text>
+            </View>
+        );
+    }
+
+    return (
+        <HeaderWithBackButton
+            shouldDisplayHelpButton={false}
+            style={[styles.h10, styles.pb3]}
+            subtitle={title}
+            onBackButtonPress={onBackPress}
+        />
+    );
+}
+
+export type {SelectedDateModifierHeaderProps};
+export default SelectedDateModifierHeader;
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
similarity index 80%
rename from src/components/Search/FilterDropdowns/DateSelectPopup.tsx
rename to src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
index 4100998aaabdf..ac01ef2705472 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
@@ -1,24 +1,20 @@
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Icon from '@components/Icon';
-import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import ScrollView from '@components/ScrollView';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePresetFilterBaseHandle} from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePreset} from '@components/Search/types';
 import Text from '@components/Text';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
+import ActionButtons from './ActionButtons';
+import SelectedDateModifierHeader from './SelectedDateModifierHeader';
 
 type DateSelectPopupProps = {
     /** The label to show when in an overlay on mobile */
@@ -40,80 +36,6 @@ type DateSelectPopupProps = {
     setPopoverWidth?: (width: number | undefined) => void;
 };
 
-type SelectedDateModifierHeaderProps = {
-    isCompact: boolean;
-    title: string;
-    onBackPress: () => void;
-};
-
-function SelectedDateModifierHeader({isCompact, title, onBackPress}: SelectedDateModifierHeaderProps) {
-    const styles = useThemeStyles();
-    const theme = useTheme();
-    const backArrowIcon = useMemoizedLazyExpensifyIcons(['BackArrow']);
-    const {translate} = useLocalize();
-
-    if (isCompact) {
-        return (
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
-                <PressableWithoutFeedback
-                    onPress={onBackPress}
-                    role={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('common.back')}
-                    sentryLabel="DateSelectPopup-Back"
-                >
-                    <Icon
-                        src={backArrowIcon.BackArrow}
-                        fill={theme.icon}
-                    />
-                </PressableWithoutFeedback>
-                <Text style={[styles.textLabelSupporting]}>{title}</Text>
-            </View>
-        );
-    }
-
-    return (
-        <HeaderWithBackButton
-            shouldDisplayHelpButton={false}
-            style={[styles.h10, styles.pb3]}
-            subtitle={title}
-            onBackButtonPress={onBackPress}
-        />
-    );
-}
-
-type ActionButtonsProps = {
-    containerStyle: React.ComponentProps<typeof View>['style'];
-    resetSentryLabel?: string;
-    applySentryLabel?: string;
-    onReset: () => void;
-    onApply: () => void;
-};
-
-function ActionButtons({containerStyle, resetSentryLabel, applySentryLabel, onReset, onApply}: ActionButtonsProps) {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-
-    return (
-        <View style={containerStyle}>
-            <Button
-                medium
-                style={[styles.flex1]}
-                text={translate('common.reset')}
-                onPress={onReset}
-                sentryLabel={resetSentryLabel}
-            />
-            <Button
-                success
-                medium
-                style={[styles.flex1]}
-                text={translate('common.apply')}
-                onPress={onApply}
-                sentryLabel={applySentryLabel}
-            />
-        </View>
-    );
-}
-
 function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopoverWidth}: DateSelectPopupProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();