diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png
new file mode 100644
index 000000000000..0d26fd8fd525
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png
new file mode 100644
index 000000000000..f0d40151d96d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ
diff --git a/packages/eui/changelogs/upcoming/8810.md b/packages/eui/changelogs/upcoming/8810.md
new file mode 100644
index 000000000000..eda3005b083a
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8810.md
@@ -0,0 +1,6 @@
+- Added prop `delimiter` on `EuiDatePickerRange`
+
+**Bug fixes**
+
+- Fixed an issue with `EuiSuperDatePicker` where toggling `isQuickSelectOnly` would cause a full re-render when the selected range uses absolute dates
+
diff --git a/packages/eui/src/components/date_picker/date_picker.tsx b/packages/eui/src/components/date_picker/date_picker.tsx
index 01b58569c86e..03b3bd12098a 100644
--- a/packages/eui/src/components/date_picker/date_picker.tsx
+++ b/packages/eui/src/components/date_picker/date_picker.tsx
@@ -213,7 +213,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
 }) => {
   // Check for whether the passed `selected` moment date is valid
   const isInvalid =
-    _isInvalid || (selected?.isValid() === false ? true : undefined);
+    _isInvalid || (selected?.isValid?.() === false ? true : undefined);
 
   const styles = useEuiMemoizedStyles(euiDatePickerStyles);
   const cssStyles = [
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 612e49e58db0..06f371800a25 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
@@ -134,25 +134,28 @@ const StatefulPlayground = ({
   ...rest
 }: EuiDatePickerRangeProps) => {
   const [selectedStartDate, setSelectedStartDate] = useState<moment.Moment>(
-    startDateControl.props.selected
+    startDateControl?.props.selected ?? moment('01/01/1970')
   );
   const [selectedEndDate, setSelectedEndDate] = useState<moment.Moment>(
-    endDateControl.props.selected
+    endDateControl?.props.selected ?? moment('01/07/1970')
   );
 
-  const startControl = React.cloneElement(startDateControl, {
-    selected: selectedStartDate,
-    onChange: setSelectedStartDate,
-    startDate: selectedStartDate,
-    endDate: selectedEndDate,
-  });
-
-  const endControl = React.cloneElement(endDateControl, {
-    selected: selectedEndDate,
-    onChange: setSelectedEndDate,
-    startDate: selectedStartDate,
-    endDate: selectedEndDate,
-  });
+  const startControl =
+    startDateControl &&
+    React.cloneElement(startDateControl, {
+      selected: selectedStartDate,
+      onChange: setSelectedStartDate,
+      startDate: selectedStartDate,
+      endDate: selectedEndDate,
+    });
+  const endControl =
+    endDateControl &&
+    React.cloneElement(endDateControl, {
+      selected: selectedEndDate,
+      onChange: setSelectedEndDate,
+      startDate: selectedStartDate,
+      endDate: selectedEndDate,
+    });
 
   return (
     <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 8e64e6ae760e..dfed0a834f2b 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.tsx
@@ -42,6 +42,7 @@ export type EuiDatePickerRangeProps = CommonProps &
     | 'compressed'
     | 'prepend'
     | 'append'
+    | 'delimiter'
   > & {
     /**
      * Including any children will replace all innards with the provided children
@@ -51,12 +52,12 @@ export type EuiDatePickerRangeProps = CommonProps &
     /**
      * The end date `EuiDatePicker` element
      */
-    endDateControl: ReactElement;
+    endDateControl?: ReactElement;
 
     /**
      * The start date `EuiDatePicker` element
      */
-    startDateControl: ReactElement;
+    startDateControl?: ReactElement;
 
     /**
      * Pass either an icon type or set to `false` to remove icon entirely
@@ -116,6 +117,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   onBlur,
   append,
   prepend,
+  delimiter,
   ...rest
 }) => {
   // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
@@ -130,8 +132,8 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
     : [
         inlineStyles.euiDatePickerRangeInline,
         // Determine the inline container query to use based on the width of the react-datepicker
-        startDateControl.props.showTimeSelect ||
-        endDateControl.props.showTimeSelect
+        startDateControl?.props.showTimeSelect ||
+        endDateControl?.props.showTimeSelect
           ? inlineStyles.responsiveWithTimeSelect
           : inlineStyles.responsive,
         shadow && inlineStyles.shadow,
@@ -141,58 +143,56 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   let endControl = endDateControl;
 
   if (!isCustom) {
-    startControl = cloneElement(
-      startDateControl as ReactElement<EuiDatePickerProps>,
-      {
+    startControl =
+      startControl &&
+      cloneElement(startDateControl as ReactElement<EuiDatePickerProps>, {
         controlOnly: true,
         showIcon: false,
         inline,
         compressed,
         fullWidth,
         readOnly,
-        disabled: disabled || startDateControl.props.disabled,
-        isInvalid: isInvalid || startDateControl.props.isInvalid,
+        disabled: disabled || startDateControl?.props.disabled,
+        isInvalid: isInvalid || startDateControl?.props.isInvalid,
         className: classNames(
           'euiDatePickerRange__start',
-          startDateControl.props.className
+          startDateControl?.props.className
         ),
         onBlur: (event: FocusEvent<HTMLInputElement>) => {
-          startDateControl.props?.onBlur?.(event);
+          startDateControl?.props?.onBlur?.(event);
           onBlur?.(event);
         },
         onFocus: (event: FocusEvent<HTMLInputElement>) => {
-          startDateControl.props?.onFocus?.(event);
+          startDateControl?.props?.onFocus?.(event);
           onFocus?.(event);
         },
-      }
-    );
+      });
 
-    endControl = cloneElement(
-      endDateControl as ReactElement<EuiDatePickerProps>,
-      {
+    endControl =
+      endControl &&
+      cloneElement(endDateControl as ReactElement<EuiDatePickerProps>, {
         controlOnly: true,
         showIcon: false,
         inline,
         compressed,
         fullWidth,
         readOnly,
-        disabled: disabled || endDateControl.props.disabled,
-        isInvalid: isInvalid || endDateControl.props.isInvalid,
+        disabled: disabled || endDateControl?.props.disabled,
+        isInvalid: isInvalid || endDateControl?.props.isInvalid,
         popoverPlacement: 'downRight',
         className: classNames(
           'euiDatePickerRange__end',
-          endDateControl.props.className
+          endDateControl?.props.className
         ),
         onBlur: (event: FocusEvent<HTMLInputElement>) => {
-          endDateControl.props?.onBlur?.(event);
+          endDateControl?.props?.onBlur?.(event);
           onBlur?.(event);
         },
         onFocus: (event: FocusEvent<HTMLInputElement>) => {
-          endDateControl.props?.onFocus?.(event);
+          endDateControl?.props?.onFocus?.(event);
           onFocus?.(event);
         },
-      }
-    );
+      });
   }
 
   const icon = useMemo(() => {
@@ -205,6 +205,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   return (
     <span className={classes} css={cssStyles} {...rest}>
       <EuiFormControlLayoutDelimited
+        delimiter={delimiter}
         icon={icon}
         startControl={startControl}
         endControl={endControl}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
index d1b643f97733..32c0874d86a5 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx
@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent } from '@storybook/test';
+import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
+import { expect, fireEvent, waitFor } from '@storybook/test';
+import type { PlayFunctionContext } from '@storybook/csf';
 import { within } from '../../../../.storybook/test';
 import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 import { enableFunctionToggleControls } from '../../../../.storybook/utils';
@@ -21,6 +22,8 @@ import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
 } from './super_date_picker';
+import { EuiFieldText } from '../../form';
+import { EuiFlexGroup } from '../../flex';
 
 const meta: Meta<EuiSuperDatePickerProps> = {
   title: 'Forms/EuiSuperDatePicker/EuiSuperDatePicker',
@@ -124,6 +127,57 @@ function CustomPanel({ applyTime }: { applyTime?: ApplyTime }) {
   );
 }
 
+export const QuickSelectOnly: Story = {
+  parameters: {
+    controls: {
+      include: ['isQuickSelectOnly'],
+    },
+    loki: { chromeSelector: LOKI_SELECTORS.portal },
+  },
+  args: {
+    start: '2025-01-01T00:00:00',
+    end: 'now',
+    isQuickSelectOnly: false,
+  },
+  render: function Render(args) {
+    const [isCollapsed, setCollapsed] = useState(
+      args.isQuickSelectOnly ?? false
+    );
+
+    useEffect(() => {
+      if (args.isQuickSelectOnly == null) return;
+
+      setCollapsed(args.isQuickSelectOnly);
+    }, [args.isQuickSelectOnly]);
+
+    return (
+      <EuiFlexGroup>
+        <EuiFieldText onFocus={() => setCollapsed(true)} />
+        <EuiSuperDatePicker
+          {...args}
+          isQuickSelectOnly={isCollapsed}
+          quickSelectButtonProps={{
+            onClick: () => setCollapsed(false),
+          }}
+        />
+      </EuiFlexGroup>
+    );
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<ReactRenderer>) => {
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      expect(
+        canvas.getByTestSubject('superDatePickerToggleQuickMenuButton')
+      ).toBeInTheDocument();
+    });
+
+    await fireEvent.click(
+      canvas.getByTestSubject('superDatePickerToggleQuickMenuButton')
+    );
+  },
+};
+
 /**
  * VRT only
  */
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
index ffe3d07895e3..afed819a614b 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
@@ -6,17 +6,19 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { fireEvent } from '@testing-library/react';
-import { render } from '../../../test/rtl';
+import React, { useState } from 'react';
+import moment from 'moment';
+import { fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { render, waitForEuiPopoverOpen } from '../../../test/rtl';
 import { requiredProps } from '../../../test';
 import { shouldRenderCustomStyles } from '../../../test/internal';
-
+import { EuiFieldText } from '../../form';
 import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
 } from './super_date_picker';
-import moment from 'moment';
 
 const noop = () => {};
 
@@ -254,6 +256,59 @@ describe('EuiSuperDatePicker', () => {
         );
         expect(container.firstChild).toMatchSnapshot();
       });
+
+      it('should open the quick select panel', async () => {
+        const Component = () => {
+          const [isCollapsed, setCollapsed] = useState(false);
+
+          return (
+            <>
+              <EuiFieldText
+                onFocus={() => setCollapsed(true)}
+                data-test-subj="euiFieldText"
+              />
+              <EuiSuperDatePicker
+                start="2025-01-01T00:00:00"
+                end="now"
+                onTimeChange={noop}
+                isQuickSelectOnly={isCollapsed}
+                quickSelectButtonProps={{
+                  onClick: () => setCollapsed(false),
+                  'data-test-subj': 'euiSuperDatePickerQuickSelectButton',
+                }}
+              />
+            </>
+          );
+        };
+        const { getByTestSubject } = render(<Component />);
+
+        const input = getByTestSubject('euiFieldText');
+        const quickSelectButton = getByTestSubject(
+          'euiSuperDatePickerQuickSelectButton'
+        );
+        const startDateButton = getByTestSubject(
+          'superDatePickerstartDatePopoverButton'
+        );
+
+        expect(startDateButton).toBeInTheDocument();
+
+        act(() => {
+          userEvent.click(input);
+        });
+
+        expect(input).toHaveFocus();
+        expect(startDateButton).not.toBeInTheDocument();
+
+        fireEvent.click(quickSelectButton);
+
+        await waitForEuiPopoverOpen();
+
+        expect(
+          getByTestSubject('superDatePickerQuickMenu')
+        ).toBeInTheDocument();
+
+        expect(document.querySelector('.euiPanel')).toHaveFocus();
+      });
     });
 
     describe('isDisabled', () => {
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
index 0317f29b5bb9..cb3652cbcba3 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -595,15 +595,6 @@ export class EuiSuperDatePickerInternal extends Component<
       ],
     };
 
-    if (isQuickSelectOnly) {
-      return (
-        <EuiFormControlLayout
-          iconsPosition="static"
-          {...formControlLayoutProps}
-        />
-      );
-    }
-
     const isDisabledDisplay = isObject(isDisabled) && isDisabled?.display;
 
     if (
@@ -612,28 +603,30 @@ export class EuiSuperDatePickerInternal extends Component<
     ) {
       return (
         <EuiFormControlLayout {...formControlLayoutProps}>
-          <button
-            type="button"
-            css={styles.euiSuperDatePicker__prettyFormat}
-            className={classNames('euiSuperDatePicker__prettyFormat', {
-              'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
-            })}
-            data-test-subj="superDatePickerShowDatesButton"
-            disabled={!!isDisabled}
-            onClick={this.hidePrettyDuration}
-            onFocus={onFocus}
-          >
-            {isDisabledDisplay ? (
-              isDisabled.display
-            ) : (
-              <PrettyDuration
-                timeFrom={start}
-                timeTo={end}
-                quickRanges={commonlyUsedRanges}
-                dateFormat={dateFormat}
-              />
-            )}
-          </button>
+          {!isQuickSelectOnly && (
+            <button
+              type="button"
+              css={styles.euiSuperDatePicker__prettyFormat}
+              className={classNames('euiSuperDatePicker__prettyFormat', {
+                'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
+              })}
+              data-test-subj="superDatePickerShowDatesButton"
+              disabled={!!isDisabled}
+              onClick={this.hidePrettyDuration}
+              onFocus={onFocus}
+            >
+              {isDisabledDisplay ? (
+                isDisabled.display
+              ) : (
+                <PrettyDuration
+                  timeFrom={start}
+                  timeTo={end}
+                  quickRanges={commonlyUsedRanges}
+                  dateFormat={dateFormat}
+                />
+              )}
+            </button>
+          )}
         </EuiFormControlLayout>
       );
     }
@@ -658,55 +651,60 @@ export class EuiSuperDatePickerInternal extends Component<
             css={rangeCssStyles}
             isCustom={true}
             iconType={false}
+            delimiter={isQuickSelectOnly ? '' : undefined}
             startDateControl={
-              <EuiDatePopoverButton
-                css={styles.euiSuperDatePicker__rangeInput}
-                className="euiSuperDatePicker__startPopoverButton"
-                compressed={compressed}
-                position="start"
-                needsUpdating={hasChanged}
-                isInvalid={isInvalid}
-                isDisabled={!!isDisabled}
-                onChange={this.setStart}
-                value={start}
-                dateFormat={dateFormat}
-                utcOffset={utcOffset}
-                timeFormat={timeFormat}
-                locale={locale || contextLocale}
-                minDate={minDate}
-                maxDate={maxDate}
-                canRoundRelativeUnits={canRoundRelativeUnits}
-                isOpen={this.state.isStartDatePopoverOpen}
-                onPopoverToggle={this.onStartDatePopoverToggle}
-                onPopoverClose={this.onStartDatePopoverClose}
-                timeOptions={timeOptions}
-                buttonProps={{ onFocus }}
-              />
+              isQuickSelectOnly ? undefined : (
+                <EuiDatePopoverButton
+                  css={styles.euiSuperDatePicker__rangeInput}
+                  className="euiSuperDatePicker__startPopoverButton"
+                  compressed={compressed}
+                  position="start"
+                  needsUpdating={hasChanged}
+                  isInvalid={isInvalid}
+                  isDisabled={!!isDisabled}
+                  onChange={this.setStart}
+                  value={start}
+                  dateFormat={dateFormat}
+                  utcOffset={utcOffset}
+                  timeFormat={timeFormat}
+                  locale={locale || contextLocale}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  canRoundRelativeUnits={canRoundRelativeUnits}
+                  isOpen={this.state.isStartDatePopoverOpen}
+                  onPopoverToggle={this.onStartDatePopoverToggle}
+                  onPopoverClose={this.onStartDatePopoverClose}
+                  timeOptions={timeOptions}
+                  buttonProps={{ onFocus }}
+                />
+              )
             }
             endDateControl={
-              <EuiDatePopoverButton
-                css={styles.euiSuperDatePicker__rangeInput}
-                position="end"
-                compressed={compressed}
-                needsUpdating={hasChanged}
-                isInvalid={isInvalid}
-                isDisabled={!!isDisabled}
-                onChange={this.setEnd}
-                value={end}
-                dateFormat={dateFormat}
-                utcOffset={utcOffset}
-                timeFormat={timeFormat}
-                locale={locale || contextLocale}
-                minDate={minDate}
-                maxDate={maxDate}
-                canRoundRelativeUnits={canRoundRelativeUnits}
-                roundUp
-                isOpen={this.state.isEndDatePopoverOpen}
-                onPopoverToggle={this.onEndDatePopoverToggle}
-                onPopoverClose={this.onEndDatePopoverClose}
-                timeOptions={timeOptions}
-                buttonProps={{ onFocus }}
-              />
+              isQuickSelectOnly ? undefined : (
+                <EuiDatePopoverButton
+                  css={styles.euiSuperDatePicker__rangeInput}
+                  position="end"
+                  compressed={compressed}
+                  needsUpdating={hasChanged}
+                  isInvalid={isInvalid}
+                  isDisabled={!!isDisabled}
+                  onChange={this.setEnd}
+                  value={end}
+                  dateFormat={dateFormat}
+                  utcOffset={utcOffset}
+                  timeFormat={timeFormat}
+                  locale={locale || contextLocale}
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  canRoundRelativeUnits={canRoundRelativeUnits}
+                  roundUp
+                  isOpen={this.state.isEndDatePopoverOpen}
+                  onPopoverToggle={this.onEndDatePopoverToggle}
+                  onPopoverClose={this.onEndDatePopoverClose}
+                  timeOptions={timeOptions}
+                  buttonProps={{ onFocus }}
+                />
+              )
             }
           />
         )}
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx
index 6497f16ad33d..c7d392cefe58 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.stories.tsx
@@ -122,8 +122,10 @@ export const Playground: Story = {
     return (
       <EuiFormControlLayoutDelimited
         {...args}
-        startControl={cloneElement(startControl, clonedControlProps)}
-        endControl={cloneElement(endControl, clonedControlProps)}
+        startControl={
+          startControl && cloneElement(startControl, clonedControlProps)
+        }
+        endControl={endControl && cloneElement(endControl, clonedControlProps)}
       />
     );
   },
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
index d4d2ba2180e5..a7078f2c74e8 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
@@ -30,11 +30,11 @@ export type EuiFormControlLayoutDelimitedProps =
     /**
      * Left side control
      */
-    startControl: ReactElement;
+    startControl?: ReactElement;
     /**
      * Right side control
      */
-    endControl: ReactElement;
+    endControl?: ReactElement;
     /**
      * The center content. Accepts a string to be wrapped in a subdued EuiText
      * or a single ReactElement
@@ -86,12 +86,12 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<
       wrapperProps={{ ...rest.wrapperProps, css: wrapperStyles }}
     >
       <FormContext.Provider value={{ defaultFullWidth: fullWidth }}>
-        {addClassesToControl(startControl)}
+        {startControl && addClassesToControl(startControl)}
         <EuiFormControlDelimiter
           delimiter={delimiter}
           isInvalid={showInvalidState}
         />
-        {addClassesToControl(endControl)}
+        {endControl && addClassesToControl(endControl)}
       </FormContext.Provider>
     </EuiFormControlLayout>
   );