diff --git a/packages/eui/changelogs/upcoming/9042.md b/packages/eui/changelogs/upcoming/9042.md
new file mode 100644
index 00000000000..795344c629a
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9042.md
@@ -0,0 +1 @@
+- Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels.
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 96942b839e9..0875082ad00 100644
--- a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`EuiDatePicker localization accepts the locale prop 1`] = `
 <span
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-inline-shadow-euiTestCss"
+  data-test-subj="test subject string"
 >
   <div
     class="euiFormControlLayout emotion-euiFormControlLayout-group"
@@ -19,6 +20,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
         <button
           aria-label="Previous Month"
           class="euiButtonIcon react-datepicker__navigation react-datepicker__navigation--previous emotion-euiButtonIcon-s-empty-text"
+          data-test-subj="test subject string-calendar-prev-month"
           title="Previous Month"
           type="button"
         >
@@ -32,6 +34,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
         <button
           aria-label="Next month"
           class="euiButtonIcon react-datepicker__navigation react-datepicker__navigation--next emotion-euiButtonIcon-s-empty-text"
+          data-test-subj="test subject string-calendar-next-month"
           title="Next month"
           type="button"
         >
@@ -482,6 +485,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
 exports[`EuiDatePicker localization inherits locale from context 1`] = `
 <span
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-inline-shadow-euiTestCss"
+  data-test-subj="test subject string"
 >
   <div
     class="euiFormControlLayout emotion-euiFormControlLayout-group"
@@ -498,6 +502,7 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
         <button
           aria-label="Previous Month"
           class="euiButtonIcon react-datepicker__navigation react-datepicker__navigation--previous emotion-euiButtonIcon-s-empty-text"
+          data-test-subj="test subject string-calendar-prev-month"
           title="Previous Month"
           type="button"
         >
@@ -511,6 +516,7 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
         <button
           aria-label="Next month"
           class="euiButtonIcon react-datepicker__navigation react-datepicker__navigation--next emotion-euiButtonIcon-s-empty-text"
+          data-test-subj="test subject string-calendar-next-month"
           title="Next month"
           type="button"
         >
@@ -961,6 +967,7 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
 exports[`EuiDatePicker renders 1`] = `
 <span
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-euiTestCss"
+  data-test-subj="test subject string"
 >
   <div
     class="euiFormControlLayout emotion-euiFormControlLayout"
@@ -987,10 +994,12 @@ exports[`EuiDatePicker renders 1`] = `
       >
         <div
           class="react-datepicker__input-container"
+          data-test-subj="test subject string-input-container"
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
             class="euiFieldText euiDatePicker testClass1 testClass2 emotion-euiFieldText-controlOnly-euiTestCss"
+            data-test-subj="test subject string-input"
             type="text"
             value=""
           />
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
index 53d178a5b02..550aa8b192e 100644
--- a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`EuiDatePickerRange is rendered 1`] = `
   >
     <div
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      data-test-subj="test subject string-range-wrapper"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
@@ -30,10 +31,12 @@ exports[`EuiDatePickerRange is rendered 1`] = `
       >
         <div
           class="react-datepicker__input-container"
+          data-test-subj="test subject string-start-date-input-container"
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
             class="euiFieldText euiDatePicker euiDatePickerRange__start euiFormControlLayoutDelimited__input emotion-euiFieldText-controlOnly-euiFormControlLayoutDelimited__input"
+            data-test-subj="test subject string-start-date-input"
             type="text"
             value=""
           />
@@ -53,10 +56,12 @@ exports[`EuiDatePickerRange is rendered 1`] = `
       >
         <div
           class="react-datepicker__input-container"
+          data-test-subj="test subject string-end-date-input-container"
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
             class="euiFieldText euiDatePicker euiDatePickerRange__end euiFormControlLayoutDelimited__input emotion-euiFieldText-controlOnly-euiFormControlLayoutDelimited__input"
+            data-test-subj="test subject string-end-date-input"
             type="text"
             value=""
           />
@@ -1549,6 +1554,7 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
   >
     <div
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      data-test-subj="test subject string-range-wrapper"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
@@ -1568,10 +1574,12 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
       >
         <div
           class="react-datepicker__input-container"
+          data-test-subj="test subject string-start-date-input-container"
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
             class="euiFieldText euiDatePicker euiDatePickerRange__start hello euiFormControlLayoutDelimited__input emotion-euiFieldText-controlOnly-euiFormControlLayoutDelimited__input"
+            data-test-subj="test subject string-start-date-input"
             type="text"
             value=""
           />
@@ -1591,10 +1599,12 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
       >
         <div
           class="react-datepicker__input-container"
+          data-test-subj="test subject string-end-date-input-container"
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
             class="euiFieldText euiDatePicker euiDatePickerRange__end world euiFormControlLayoutDelimited__input emotion-euiFieldText-controlOnly-euiFormControlLayoutDelimited__input"
+            data-test-subj="test subject string-end-date-input"
             type="text"
             value=""
           />
diff --git a/packages/eui/src/components/date_picker/date_picker.stories.tsx b/packages/eui/src/components/date_picker/date_picker.stories.tsx
index 9aea2690272..02e2ceec630 100644
--- a/packages/eui/src/components/date_picker/date_picker.stories.tsx
+++ b/packages/eui/src/components/date_picker/date_picker.stories.tsx
@@ -120,6 +120,7 @@ const meta: Meta<EuiDatePickerProps> = {
     readOnly: false,
     selected: null,
     utcOffset: undefined,
+    'data-test-subj': 'my-date-picker',
   },
   // Open the datepicker automatically for Loki VRT
   play: async ({ canvasElement, step }) => {
diff --git a/packages/eui/src/components/date_picker/date_picker.test.tsx b/packages/eui/src/components/date_picker/date_picker.test.tsx
index 63af2d48d98..b46433ca2fc 100644
--- a/packages/eui/src/components/date_picker/date_picker.test.tsx
+++ b/packages/eui/src/components/date_picker/date_picker.test.tsx
@@ -72,6 +72,28 @@ describe('EuiDatePicker', () => {
     expect(container.innerHTML).toContain('-compressed');
   });
 
+  test('data-test-subj', () => {
+    const { getByTestSubject } = render(
+      <EuiDatePicker data-test-subj="date-picker-test" />
+    );
+
+    expect(getByTestSubject('date-picker-test')).toBeInTheDocument();
+    expect(getByTestSubject('date-picker-test-input')).toBeInTheDocument();
+  });
+
+  test('data-test-subj with clear button', () => {
+    const selected = moment();
+    const { getByTestSubject } = render(
+      <EuiDatePicker
+        data-test-subj="date-picker-test"
+        selected={selected}
+        onClear={() => {}}
+      />
+    );
+
+    expect(getByTestSubject('date-picker-test-clear')).toBeInTheDocument();
+  });
+
   test('append/prepend', () => {
     const { container, rerender } = render(
       <EuiDatePicker append="hello" prepend="world" />
diff --git a/packages/eui/src/components/date_picker/date_picker.tsx b/packages/eui/src/components/date_picker/date_picker.tsx
index 03b3bd12098..7d0ee2a9820 100644
--- a/packages/eui/src/components/date_picker/date_picker.tsx
+++ b/packages/eui/src/components/date_picker/date_picker.tsx
@@ -176,6 +176,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   compressed,
   controlOnly,
   customInput,
+  'data-test-subj': dataTestSubj,
   dateFormat = euiDatePickerDefaultDateFormat,
   dayClassName,
   disabled,
@@ -296,6 +297,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
             yearDropdownItemNumber={7}
             accessibleMode={!(disabled || readOnly)}
             popperPlacement={popoverPlacement}
+            data-test-subj={dataTestSubj}
             {...rest}
           />
         );
@@ -317,11 +319,18 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   }
 
   return (
-    <span css={cssStyles} className={classes}>
+    <span css={cssStyles} className={classes} data-test-subj={dataTestSubj}>
       <EuiFormControlLayout
         icon={optionalIcon}
         clear={
-          selected && !disabled && onClear ? { onClick: onClear } : undefined
+          selected && !disabled && onClear
+            ? {
+                onClick: onClear,
+                'data-test-subj': dataTestSubj
+                  ? `${dataTestSubj}-clear`
+                  : undefined,
+              }
+            : undefined
         }
         isLoading={isLoading}
         isInvalid={isInvalid}
diff --git a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
index 06f371800a2..f986b6ca5b5 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
@@ -34,6 +34,7 @@ const meta: Meta<EuiDatePickerRangeProps> = {
     disabled: false,
     append: '',
     prepend: '',
+    'data-test-subj': 'my-date-range-picker',
   },
 };
 
diff --git a/packages/eui/src/components/date_picker/date_picker_range.test.tsx b/packages/eui/src/components/date_picker/date_picker_range.test.tsx
index b4b80e79829..893801ff7a0 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.test.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.test.tsx
@@ -37,6 +37,27 @@ describe('EuiDatePickerRange', () => {
   });
 
   describe('props', () => {
+    test('data-test-subj', () => {
+      const { getByTestSubject } = render(
+        <EuiDatePickerRange
+          data-test-subj="date-range-test"
+          startDateControl={<EuiDatePicker />}
+          endDateControl={<EuiDatePicker />}
+        />
+      );
+
+      expect(getByTestSubject('date-range-test')).toBeInTheDocument();
+      expect(
+        getByTestSubject('date-range-test-range-wrapper')
+      ).toBeInTheDocument();
+      expect(
+        getByTestSubject('date-range-test-start-date-input')
+      ).toBeInTheDocument();
+      expect(
+        getByTestSubject('date-range-test-end-date-input')
+      ).toBeInTheDocument();
+    });
+
     test('fullWidth', () => {
       const { container } = render(
         <EuiDatePickerRange
diff --git a/packages/eui/src/components/date_picker/date_picker_range.tsx b/packages/eui/src/components/date_picker/date_picker_range.tsx
index 75a29b5a526..99a2b11b55f 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.tsx
@@ -101,6 +101,7 @@ export type EuiDatePickerRangeProps = CommonProps &
 export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   children,
   className,
+  'data-test-subj': dataTestSubj,
   startDateControl,
   endDateControl,
   iconType = true,
@@ -159,6 +160,9 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
           'euiDatePickerRange__start',
           startDateControl?.props.className
         ),
+        'data-test-subj': dataTestSubj
+          ? `${dataTestSubj}-start-date`
+          : undefined,
         onBlur: (event: FocusEvent<HTMLInputElement>) => {
           startDateControl?.props?.onBlur?.(event);
           onBlur?.(event);
@@ -185,6 +189,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
           'euiDatePickerRange__end',
           endDateControl?.props.className
         ),
+        'data-test-subj': dataTestSubj ? `${dataTestSubj}-end-date` : undefined,
         onBlur: (event: FocusEvent<HTMLInputElement>) => {
           endDateControl?.props?.onBlur?.(event);
           onBlur?.(event);
@@ -204,7 +209,12 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   }, [iconType, inline]);
 
   return (
-    <div className={classes} css={cssStyles} {...rest}>
+    <div
+      className={classes}
+      css={cssStyles}
+      data-test-subj={dataTestSubj}
+      {...rest}
+    >
       <EuiFormControlLayoutDelimited
         delimiter={delimiter}
         icon={icon}
@@ -225,6 +235,11 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
             ? inlineStyles.formLayout.shadow
             : inlineStyles.formLayout.noShadow)
         }
+        wrapperProps={{
+          'data-test-subj': dataTestSubj
+            ? `${dataTestSubj}-range-wrapper`
+            : undefined,
+        }}
       />
     </div>
   );
diff --git a/packages/eui/src/components/date_picker/react-datepicker/src/calendar.js b/packages/eui/src/components/date_picker/react-datepicker/src/calendar.js
index 445f1fb5d20..6769c92c1f0 100644
--- a/packages/eui/src/components/date_picker/react-datepicker/src/calendar.js
+++ b/packages/eui/src/components/date_picker/react-datepicker/src/calendar.js
@@ -367,9 +367,9 @@ export default class Calendar extends React.Component {
             {/* we're using sr-only and aria-hidden here instead of aria-label as aria-label is
             not generally applied/read by screen readers for non-semantic element like div */}
             <span aria-hidden="true">{weekDayName}</span>
-              <EuiScreenReaderOnly>
-                <span>{weekDayNameLong}</span>
-              </EuiScreenReaderOnly>
+            <EuiScreenReaderOnly>
+              <span>{weekDayNameLong}</span>
+            </EuiScreenReaderOnly>
           </div>
         );
       })
@@ -421,6 +421,8 @@ export default class Calendar extends React.Component {
       clickHandler = null;
     }
 
+    const dataTestSubj = this.props['data-test-subj'];
+
     return (
       <EuiButtonIcon
         iconType="sortLeft"
@@ -431,6 +433,7 @@ export default class Calendar extends React.Component {
         disabled={!this.props.accessibleMode}
         aria-label={this.props.previousMonthButtonLabel}
         title={this.props.previousMonthButtonLabel}
+        data-test-subj={dataTestSubj ? `${dataTestSubj}-prev-month` : undefined}
       />
     );
   };
@@ -473,6 +476,8 @@ export default class Calendar extends React.Component {
       clickHandler = null;
     }
 
+    const dataTestSubj = this.props['data-test-subj'];
+
     return (
       <EuiButtonIcon
         iconType="sortRight"
@@ -483,6 +488,7 @@ export default class Calendar extends React.Component {
         disabled={!this.props.accessibleMode}
         aria-label={this.props.nextMonthButtonLabel}
         title={this.props.nextMonthButtonLabel}
+        data-test-subj={dataTestSubj ? `${dataTestSubj}-next-month` : undefined}
       />
     );
   };
@@ -711,6 +717,7 @@ export default class Calendar extends React.Component {
 
   render() {
     const Container = this.props.container || CalendarContainer;
+    const dataTestSubj = this.props['data-test-subj'];
 
     const classes = classnames("react-datepicker", this.props.className, {
       "react-datepicker--time-only": this.props.showTimeSelectOnly,
@@ -724,7 +731,7 @@ export default class Calendar extends React.Component {
 
     if (trapFocus) {
       return (
-        <Container className={classes}>
+        <Container className={classes} data-test-subj={dataTestSubj}>
           <EuiFocusTrap
             disabled={this.state.pauseFocusTrap || !this.props.enableFocusTrap}
             className="react-datepicker__focusTrap"
@@ -742,7 +749,7 @@ export default class Calendar extends React.Component {
       );
     } else {
       return (
-        <Container className={classes}>
+        <Container className={classes} data-test-subj={dataTestSubj}>
           {this.renderPreviousMonthButton()}
           {this.renderNextMonthButton()}
           {this.renderMonths()}
diff --git a/packages/eui/src/components/date_picker/react-datepicker/src/index.js b/packages/eui/src/components/date_picker/react-datepicker/src/index.js
index efd9aae78ac..01d78ecd6b5 100644
--- a/packages/eui/src/components/date_picker/react-datepicker/src/index.js
+++ b/packages/eui/src/components/date_picker/react-datepicker/src/index.js
@@ -785,6 +785,8 @@ export default class DatePicker extends React.Component {
         : typeof this.state.inputValue === "string"
           ? this.state.inputValue
           : safeDateFormat(this.props.selected, this.props);
+    
+    const dataTestSubj = this.props['data-test-subj'];
 
     return React.cloneElement(customInput, {
       [customInputRef]: input => {
@@ -807,7 +809,8 @@ export default class DatePicker extends React.Component {
       readOnly: this.props.readOnly,
       required: this.props.required,
       tabIndex: this.props.tabIndex,
-      "aria-label": this.state.open ? 'Press the down key to enter a popover containing a calendar. Press the escape key to close the popover.' : 'Press the down key to open a popover containing a calendar.'
+      "aria-label": this.state.open ? 'Press the down key to enter a popover containing a calendar. Press the escape key to close the popover.' : 'Press the down key to open a popover containing a calendar.',
+      "data-test-subj": dataTestSubj ? `${dataTestSubj}-input` : undefined,
     });
   };
 
@@ -846,22 +849,52 @@ export default class DatePicker extends React.Component {
   render() {
     const calendar = this.renderCalendar();
 
+    const dataTestSubj = this.props['data-test-subj'];
+
     if (this.props.inline && !this.props.withPortal) {
-      return calendar;
+      return calendar && React.isValidElement(calendar)
+        ? React.cloneElement(calendar, {
+            'data-test-subj': dataTestSubj
+              ? `${dataTestSubj}-calendar`
+              : calendar.props && calendar.props['data-test-subj'],
+          })
+        : calendar;
     }
 
     if (this.props.withPortal) {
       return (
-        <div>
+        <div
+          data-test-subj={
+            dataTestSubj ? `${dataTestSubj}-portal-container` : undefined
+          }
+        >
           {!this.props.inline ? (
-            <div className="react-datepicker__input-container">
+            <div
+              className="react-datepicker__input-container"
+              data-test-subj={
+                dataTestSubj ? `${dataTestSubj}-input-container` : undefined
+              }
+            >
               {this.renderDateInput()}
               {this.renderClearButton()}
               {this.renderAccessibleButton()}
             </div>
           ) : null}
           {this.state.open || this.props.inline ? (
-            <div className="react-datepicker__portal">{calendar}</div>
+            <div
+              className="react-datepicker__portal"
+              data-test-subj={
+                dataTestSubj ? `${dataTestSubj}-portal` : undefined
+              }
+            >
+              {calendar && React.isValidElement(calendar)
+                ? React.cloneElement(calendar, {
+                    'data-test-subj': dataTestSubj
+                      ? `${dataTestSubj}-calendar`
+                      : calendar.props && calendar.props['data-test-subj'],
+                  })
+                : calendar}
+            </div>
           ) : null}
         </div>
       );
@@ -882,9 +915,19 @@ export default class DatePicker extends React.Component {
         panelRef={elem => {
           this.popover = elem;
         }}
+        panelProps={{
+          'data-test-subj': dataTestSubj
+            ? `${dataTestSubj}-popover`
+            : undefined,
+        }}
         {...this.props.popperProps}
         button={
-          <div className="react-datepicker__input-container">
+          <div
+            className="react-datepicker__input-container"
+            data-test-subj={
+              dataTestSubj ? `${dataTestSubj}-input-container` : undefined
+            }
+          >
             {this.renderDateInput()}
             {this.renderClearButton()}
             {this.renderAccessibleButton()}
@@ -892,11 +935,17 @@ export default class DatePicker extends React.Component {
         }
         
       >
-        {calendar}
+        {calendar && React.isValidElement(calendar)
+          ? React.cloneElement(calendar, {
+              'data-test-subj': dataTestSubj
+                ? `${dataTestSubj}-calendar`
+                : calendar.props && calendar.props['data-test-subj'],
+            })
+          : calendar}
       </EuiPopover>
     );
   }
 }
 
 const PRESELECT_CHANGE_VIA_INPUT = "input";
-const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
+const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
\ No newline at end of file