diff --git a/skills/carbon-react/components/date-input.md b/skills/carbon-react/components/date-input.md
index 0e374d1488..1f1ee536b0 100644
--- a/skills/carbon-react/components/date-input.md
+++ b/skills/carbon-react/components/date-input.md
@@ -39,8 +39,6 @@ description: Carbon DateInput component props and usage examples.
 | dangerouslySetInnerHTML | { __html: string \| TrustedHTML; } \| undefined | No |  |  |  |  |  |
 | datatype | string \| undefined | No |  |  |  |  |  |
 | dateFormatOverride | string \| undefined | No |  |  |  | Date format string to be applied to the date inputs |  |
-| datePickerAriaLabel | string \| undefined | No |  |  |  | Prop to specify the aria-label attribute of the date picker |  |
-| datePickerAriaLabelledBy | string \| undefined | No |  |  |  | Prop to specify the aria-labelledby attribute of the date picker |  |
 | defaultChecked | boolean \| undefined | No |  |  |  |  |  |
 | dir | string \| undefined | No |  |  |  |  |  |
 | disabled | boolean \| undefined | No |  |  |  | If true, the component will be disabled |  |
@@ -283,9 +281,11 @@ description: Carbon DateInput component props and usage examples.
 | unselectable | "off" \| "on" \| undefined | No |  |  |  |  |  |
 | validationIconId | string \| undefined | No |  |  |  | Id of the validation icon |  |
 | validationMessagePositionTop | boolean \| undefined | No |  |  |  | Render the ValidationMessage above the Textbox input when validationRedesignOptIn flag is set |  |
+| variant | "typical" \| "legacy" \| undefined | No |  |  |  | Date input presentation. Typical is the default; legacy retains its icon trigger. |  |
 | vocab | string \| undefined | No |  |  |  |  |  |
 | warning | string \| boolean \| undefined | No |  |  |  | Indicate that warning has occurred. |  |
 | width | string \| number \| undefined | No |  |  |  |  |  |
+| yearRangeOffset | number \| undefined | No |  |  |  | Number of years shown either side of the bounds (`minDate`/`maxDate`, or `pickerProps.startMonth`/`endMonth`) or the anchor year in the year selector dropdown. Defaults to 10. |  |
 | data-element | string \| undefined | No |  |  |  | Identifier used for testing purposes, applied to the root element of the component. |  |
 | data-role | string \| undefined | No |  |  |  | Identifier used for testing purposes, applied to the root element of the component. |  |
 | aria-activedescendant | string \| undefined | No |  |  |  | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |  |
@@ -340,6 +340,8 @@ description: Carbon DateInput component props and usage examples.
 | aria-valuenow | number \| undefined | No |  |  |  | Defines the current value for a range widget. |  |
 | aria-valuetext | string \| undefined | No |  |  |  | Defines the human readable text alternative of aria-valuenow for a range widget. |  |
 | adaptiveLabelBreakpoint | number \| undefined | No |  | Yes | `adaptiveLabelBreakpoint` has been deprecated, the functionality will no longer work. |  |  |
+| datePickerAriaLabel | string \| undefined | No |  | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. |  |  |
+| datePickerAriaLabelledBy | string \| undefined | No |  | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. |  |  |
 | fieldHelp | React.ReactNode | No |  | Yes | `fieldHelp` has been deprecated, `inputHint` should be used instead. [Legacy] Help content to be displayed under an input. |  |  |
 | helpAriaLabel | string \| undefined | No |  | Yes | `helpAriaLabel` has been deprecated, the functionality will no longer work. |  |  |
 | info | string \| boolean \| undefined | No |  | Yes | `info` has been deprecated, the functionality will no longer work. |  |  |
@@ -363,17 +365,29 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
+  const [typicalValue, setTypicalValue] = useState(storyDateValue);
+  const [legacyValue, setLegacyValue] = useState(storyDateValue);
+
   return (
-    <DateInput
-      label="Date"
-      name="date-input"
-      value={state}
-      onChange={setValue}
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <DateInput
+        label="Typical date"
+        name="date-input-typical"
+        value={typicalValue}
+        onChange={(event) => setTypicalValue(event.target.value.formattedValue)}
+      />
+      <DateInput
+        variant="legacy"
+        label="Legacy date"
+        name="date-input-legacy"
+        value={legacyValue}
+        onChange={(event) => setLegacyValue(event.target.value.formattedValue)}
+      />
+    </Box>
   );
 }
 ```
@@ -385,19 +399,7 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput
-      label="Date"
-      inputHint="Hint text"
-      name="date-input"
-      value={state}
-      onChange={setValue}
-    />
-  );
+  return <PairedDateInputs inputHint="Hint text" />;
 }
 ```
 
@@ -408,23 +410,16 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
   return (
-    <>
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-s)"
+    >
       {(["small", "medium", "large"] as const).map((size) => (
-        <DateInput
-          key={`Date - ${size}`}
-          label={`Date - ${size}`}
-          value={state}
-          onChange={setValue}
-          size={size}
-          mb={2}
-        />
+        <PairedDateInputs key={size} size={size} />
       ))}
-    </>
+    </Box>
   );
 }
 ```
@@ -436,11 +431,7 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return <DateInput label="Date" value={state} onChange={setValue} disabled />;
+  return <PairedDateInputs disabled />;
 }
 ```
 
@@ -451,11 +442,7 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return <DateInput label="Date" value={state} onChange={setValue} readOnly />;
+  return <PairedDateInputs readOnly />;
 }
 ```
 
@@ -466,90 +453,107 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
+  const [typicalValue, setTypicalValue] = useState("");
+  const [legacyValue, setLegacyValue] = useState("");
+
+  const setValues = (value: string) => {
+    setTypicalValue(value);
+    setLegacyValue(value);
   };
+
   return (
     <>
       <Box mb={2}>
-        <Button onClick={() => setState("")}>Set empty date</Button>
-        <Button onClick={() => setState("01/04/2019")} ml={2}>
-          Set 2019-04-01
+        <Button onClick={() => setValues("")}>Set empty dates</Button>
+        <Button onClick={() => setValues(storyDateValue)} ml={2}>
+          Set dates to yesterday
         </Button>
       </Box>
-      <DateInput
-        label="Date"
-        name="dateinput"
-        value={state}
-        onChange={setValue}
-        allowEmptyValue
-      />
+      <Box
+        display="flex"
+        flexDirection="column"
+        gap="var(--global-space-layout-xs)"
+      >
+        <DateInput
+          label="Typical date"
+          name="date-input-typical"
+          value={typicalValue}
+          onChange={(event) =>
+            setTypicalValue(event.target.value.formattedValue)
+          }
+          allowEmptyValue
+        />
+        <DateInput
+          variant="legacy"
+          label="Legacy date"
+          name="date-input-legacy"
+          value={legacyValue}
+          onChange={(event) =>
+            setLegacyValue(event.target.value.formattedValue)
+          }
+          allowEmptyValue
+        />
+      </Box>
     </>
   );
 }
 ```
 
 
-### Disabled Dates
+### Disabled Dates in Calendar
 
 **Render**
 
 ```tsx
-({ onChange, ...args }: DateInputProps) => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
+() => {
+  const isWeekend = (day: Date) => [0, 6].includes(day.getDay());
+
   return (
-    <DateInput
-      {...args}
-      label="Date"
-      name="date-input"
-      value={state}
-      minDate="2019-04-04"
-      maxDate="2019-05-31"
-      onChange={(ev) => {
-        setValue(ev);
-        onChange?.(ev);
-      }}
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <Typography variant="p">
+        Saturdays and Sundays are disabled in both calendars.
+      </Typography>
+      <PairedDateInputs
+        labelDetail="weekends disabled"
+        pickerProps={{
+          disabled: [isWeekend],
+        }}
+      />
+    </Box>
   );
 }
 ```
 
 
-### Disabled Dates using pickerProps
+### Disabled Dates Outside Min/Max Range
 
 **Render**
 
 ```tsx
 () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-
-  const isWeekend = (day: Date) => [0, 6].includes(day.getDay());
-
   return (
-    <DateInput
-      label="Date"
-      name="date-input"
-      value={state}
-      onChange={setValue}
-      pickerProps={{
-        disabled: [
-          isWeekend,
-          {
-            from: new Date(2019, 3, 1),
-            to: new Date(2019, 3, 15),
-          },
-          { before: new Date(2019, 2, 15) },
-          { after: new Date(2019, 4, 15) },
-        ],
-      }}
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <Typography variant="p">
+        Days outside the minDate/maxDate range are disabled in the calendar
+        below: only dates from 10th to 20th June 2024 are selectable. The year
+        and month selectors themselves remain enabled so users can still
+        navigate to, and view, months outside the selectable range.
+      </Typography>
+      <PairedDateInputs
+        initialValue="15/06/2024"
+        labelDetail="only 10th-20th June 2024 selectable"
+        minDate="2024-06-10"
+        maxDate="2024-06-20"
+      />
+    </Box>
   );
 }
 ```
@@ -561,19 +565,7 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput
-      label="Date"
-      value={state}
-      onChange={setValue}
-      labelInline
-      name="dateinput"
-    />
-  );
+  return <PairedDateInputs labelInline />;
 }
 ```
 
@@ -584,59 +576,83 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput
-      label="Date"
-      value={state}
-      onChange={setValue}
-      maxWidth="300px"
-    />
-  );
+  return <PairedDateInputs maxWidth="300px" />;
 }
 ```
 
 
-### With Field Help
+### With Error
 
 **Render**
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
   return (
-    <DateInput
-      label="Date"
-      value={state}
-      onChange={setValue}
-      fieldHelp="Help"
-      name="dateinput"
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-s)"
+    >
+      <PairedDateInputs
+        labelDetail="error above"
+        inputHint="Date must be in DD/MM/YYYY format"
+        error="Enter a valid date"
+      />
+      <PairedDateInputs
+        labelDetail="error below"
+        validationMessagePositionTop={false}
+        inputHint="Date must be in DD/MM/YYYY format"
+        error="Enter a valid date"
+      />
+    </Box>
   );
 }
 ```
 
 
-### With Disabled Portal
+### With Caution
 
 **Render**
 
 ```tsx
-() => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput label="Date" value={state} onChange={setValue} disablePortal />
-  );
-}
+() => (
+  <Box display="flex" flexDirection="column" gap="var(--global-space-layout-s)">
+    <PairedDateInputs
+      labelDetail="caution above"
+      inputHint="Check that the date is correct"
+      warning="Caution message (fix is optional)"
+    />
+    <PairedDateInputs
+      labelDetail="caution below"
+      validationMessagePositionTop={false}
+      inputHint="Check that the date is correct"
+      warning="Caution message (fix is optional)"
+    />
+  </Box>
+)
+```
+
+
+### Without Portal (Deprecated)
+
+**Render**
+
+```tsx
+() => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    gap="var(--global-space-layout-xs)"
+  >
+    <Typography variant="p">
+      Deprecated compatibility behavior: disablePortal renders the calendar in
+      the Date Input&apos;s local DOM tree instead of through a portal. Existing
+      legacy and typical consumers remain supported, but new implementations
+      should not adopt this prop.
+    </Typography>
+    <PairedDateInputs disablePortal />
+  </Box>
+)
 ```
 
 
@@ -646,11 +662,7 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return <DateInput label="Date" value={state} onChange={setValue} required />;
+  return <PairedDateInputs required />;
 }
 ```
 
@@ -661,16 +673,17 @@ description: Carbon DateInput component props and usage examples.
 
 ```tsx
 () => {
-  const [state, setState] = useState("2022-04-05");
-  const handleChange = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  const [state2, setState2] = useState("2022-04-05");
-  const handleChange2 = (ev: DateChangeEvent) => {
-    setState2(ev.target.value.formattedValue);
-  };
   return (
-    <Box display="flex" justifyContent="space-around">
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-m)"
+    >
+      <Typography variant="p">
+        Locale values are merged with en-GB. Applications should supply approved
+        translations for their users through I18nProvider; omitted accessibility
+        labels fall back to en-GB.
+      </Typography>
       <I18nProvider
         locale={{
           locale: () => "de-DE",
@@ -683,11 +696,7 @@ description: Carbon DateInput component props and usage examples.
           },
         }}
       >
-        <DateInput
-          label="Date `DE` locale"
-          value={state}
-          onChange={handleChange}
-        />
+        <PairedDateInputs initialValue="2022-04-05" labelDetail="DE locale" />
       </I18nProvider>
       <I18nProvider
         locale={{
@@ -701,10 +710,43 @@ description: Carbon DateInput component props and usage examples.
           },
         }}
       >
-        <DateInput
-          label="Date `zh-CN` locale"
-          value={state2}
-          onChange={handleChange2}
+        <PairedDateInputs
+          initialValue="2022-04-05"
+          labelDetail="zh-CN locale"
+        />
+      </I18nProvider>
+      <I18nProvider
+        locale={{
+          locale: () => "pl-PL",
+          date: {
+            dateFnsLocale: () => pl,
+            ariaLabels: {
+              previousMonthButton: () => "Poprzedni miesiąc",
+              nextMonthButton: () => "Następny miesiąc",
+            },
+          },
+        }}
+      >
+        <PairedDateInputs
+          initialValue="2022-04-05"
+          labelDetail="pl-PL locale"
+        />
+      </I18nProvider>
+      <I18nProvider
+        locale={{
+          locale: () => "en-GB",
+          date: {
+            dateFnsLocale: () => enGB,
+            ariaLabels: {
+              previousMonthButton: () => "Previous month",
+              nextMonthButton: () => "Next month",
+            },
+          },
+        }}
+      >
+        <PairedDateInputs
+          initialValue="2022-04-05"
+          labelDetail="en-GB locale"
         />
       </I18nProvider>
     </Box>
@@ -733,7 +775,16 @@ description: Carbon DateInput component props and usage examples.
   };
 
   return (
-    <Box display="flex" justifyContent="space-around">
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-s)"
+    >
+      <Typography variant="p">
+        Both fields use the German locale. The first uses the locale translation
+        key, so it displays YYYY-MM-DD. The second passes dateFormatOverride
+        directly, so that prop takes precedence and displays DD/MM/YYYY.
+      </Typography>
       <I18nProvider
         locale={{
           locale: () => "de-DE",
@@ -749,7 +800,8 @@ description: Carbon DateInput component props and usage examples.
       >
         <DateInput
           {...args}
-          label="With dateFormatOverride translation key"
+          variant="typical"
+          label="Translation key format (YYYY-MM-DD)"
           value={stateKey}
           onChange={(ev) => {
             handleChangeKey(ev);
@@ -760,7 +812,8 @@ description: Carbon DateInput component props and usage examples.
 
         <DateInput
           {...args}
-          label="With dateFormatOverride prop"
+          variant="typical"
+          label="Prop override format (DD/MM/YYYY)"
           value={stateProp}
           onChange={(ev) => {
             handleChangeProp(ev);
diff --git a/skills/carbon-react/components/date-range.md b/skills/carbon-react/components/date-range.md
index df6fa438cf..20e008b368 100644
--- a/skills/carbon-react/components/date-range.md
+++ b/skills/carbon-react/components/date-range.md
@@ -13,51 +13,51 @@ description: Carbon DateRange component props and usage examples.
 - Props interface: `DateRangeProps`
 
 ## Props
-| Name | Type | Required | Literals | Description | Default |
-| --- | --- | --- | --- | --- | --- |
-| onChange | (ev: DateRangeChangeEvent) => void | Yes |  | Specify a callback triggered on change |  |
-| value | string[] | Yes |  | An array containing the value of startDate and endDate |  |
-| dateFormatOverride | string \| undefined | No |  | Date format string to be applied to the date inputs |  |
-| datePickerEndAriaLabel | string \| undefined | No |  | Prop to specify the aria-label attribute of the end date picker |  |
-| datePickerEndAriaLabelledBy | string \| undefined | No |  | Prop to specify the aria-labelledby attribute of the end date picker |  |
-| datePickerStartAriaLabel | string \| undefined | No |  | Prop to specify the aria-label attribute of the start date picker |  |
-| datePickerStartAriaLabelledBy | string \| undefined | No |  | Prop to specify the aria-labelledby attribute of the start date picker |  |
-| endDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No |  | Props for the child end Date component | {} |
-| endError | string \| boolean \| undefined | No |  | Indicate that error has occurred on end date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. |  |
-| endInfo | string \| boolean \| undefined | No |  | [Legacy] Indicate additional information for end date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. |  |
-| endLabel | string \| undefined | No |  | Optional label for endDate field |  |
-| endRef | React.ForwardedRef<HTMLInputElement> \| undefined | No |  | A React ref to pass to the second of the two Date Input fields |  |
-| endWarning | string \| boolean \| undefined | No |  | Indicate that warning has occurred on end date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. |  |
-| id | string \| undefined | No |  | An optional string prop to provide an id to the component |  |
-| labelsInline | boolean \| undefined | No |  | [Legacy] Display labels inline |  |
-| m | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on top, left, bottom and right |  |
-| margin | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on top, left, bottom and right |  |
-| marginBottom | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on bottom |  |
-| marginLeft | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on left |  |
-| marginRight | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on right |  |
-| marginTop | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on top |  |
-| marginX | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on left and right |  |
-| marginY | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on top and bottom |  |
-| mb | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on bottom |  |
-| ml | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on left |  |
-| mr | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on right |  |
-| mt | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on top |  |
-| mx | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on left and right |  |
-| my | ResponsiveValue<TVal, ThemeType> \| undefined | No |  | Margin on top and bottom |  |
-| name | string \| undefined | No |  | An optional string prop to provide a name to the component |  |
-| onBlur | ((ev: DateRangeChangeEvent) => void) \| undefined | No |  | Specify a callback triggered on blur |  |
-| required | boolean \| undefined | No |  | Flag to configure component as mandatory. |  |
-| startDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No |  | Props for the child start Date component | {} |
-| startError | string \| boolean \| undefined | No |  | Indicate that error has occurred on start date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. |  |
-| startInfo | string \| boolean \| undefined | No |  | [Legacy] Indicate additional information for start date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. |  |
-| startLabel | string \| undefined | No |  | Optional label for startDate field |  |
-| startRef | React.ForwardedRef<HTMLInputElement> \| undefined | No |  | A React ref to pass to the first of the two Date Input fields |  |
-| startWarning | string \| boolean \| undefined | No |  | Indicate that warning has occurred on start date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. |  |
-| tooltipPosition | "left" \| "right" \| "bottom" \| "top" \| undefined | No |  | [Legacy] Overrides the default tooltip position |  |
-| validationMessagePositionTop | boolean \| undefined | No |  | Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set | true |
-| validationOnLabel | boolean \| undefined | No |  | [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs |  |
-| data-element | string \| undefined | No |  | Identifier used for testing purposes, applied to the root element of the component. |  |
-| data-role | string \| undefined | No |  | Identifier used for testing purposes, applied to the root element of the component. |  |
+| Name | Type | Required | Literals | Deprecated | Deprecation reason | Description | Default |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| onChange | (ev: DateRangeChangeEvent) => void | Yes |  |  |  | Specify a callback triggered on change |  |
+| value | string[] | Yes |  |  |  | An array containing the value of startDate and endDate |  |
+| dateFormatOverride | string \| undefined | No |  |  |  | Date format string to be applied to the date inputs |  |
+| endDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No |  |  |  | Props for the child end Date component | {} |
+| endError | string \| boolean \| undefined | No |  |  |  | Indicate that error has occurred on end date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. |  |
+| endInfo | string \| boolean \| undefined | No |  |  |  | [Legacy] Indicate additional information for end date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. |  |
+| endLabel | string \| undefined | No |  |  |  | Optional label for endDate field |  |
+| endRef | React.ForwardedRef<HTMLInputElement> \| undefined | No |  |  |  | A React ref to pass to the second of the two Date Input fields |  |
+| endWarning | string \| boolean \| undefined | No |  |  |  | Indicate that warning has occurred on end date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. |  |
+| id | string \| undefined | No |  |  |  | An optional string prop to provide an id to the component |  |
+| labelsInline | boolean \| undefined | No |  |  |  | [Legacy] Display labels inline |  |
+| m | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on top, left, bottom and right |  |
+| margin | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on top, left, bottom and right |  |
+| marginBottom | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on bottom |  |
+| marginLeft | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on left |  |
+| marginRight | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on right |  |
+| marginTop | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on top |  |
+| marginX | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on left and right |  |
+| marginY | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on top and bottom |  |
+| mb | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on bottom |  |
+| ml | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on left |  |
+| mr | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on right |  |
+| mt | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on top |  |
+| mx | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on left and right |  |
+| my | ResponsiveValue<TVal, ThemeType> \| undefined | No |  |  |  | Margin on top and bottom |  |
+| name | string \| undefined | No |  |  |  | An optional string prop to provide a name to the component |  |
+| onBlur | ((ev: DateRangeChangeEvent) => void) \| undefined | No |  |  |  | Specify a callback triggered on blur |  |
+| required | boolean \| undefined | No |  |  |  | Flag to configure component as mandatory. |  |
+| startDateProps | Omit<Partial<DateInputProps>, "required"> \| undefined | No |  |  |  | Props for the child start Date component | {} |
+| startError | string \| boolean \| undefined | No |  |  |  | Indicate that error has occurred on start date. Pass string to display icon, tooltip and red border. Pass true boolean to only display red border. |  |
+| startInfo | string \| boolean \| undefined | No |  |  |  | [Legacy] Indicate additional information for start date. Pass string to display icon, tooltip and blue border. Pass true boolean to only display blue border. |  |
+| startLabel | string \| undefined | No |  |  |  | Optional label for startDate field |  |
+| startRef | React.ForwardedRef<HTMLInputElement> \| undefined | No |  |  |  | A React ref to pass to the first of the two Date Input fields |  |
+| startWarning | string \| boolean \| undefined | No |  |  |  | Indicate that warning has occurred on start date. Pass string to display icon, tooltip and orange border. Pass true boolean to only display orange border. |  |
+| tooltipPosition | "left" \| "right" \| "bottom" \| "top" \| undefined | No |  |  |  | [Legacy] Overrides the default tooltip position |  |
+| validationMessagePositionTop | boolean \| undefined | No |  |  |  | Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set | true |
+| validationOnLabel | boolean \| undefined | No |  |  |  | [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs |  |
+| data-element | string \| undefined | No |  |  |  | Identifier used for testing purposes, applied to the root element of the component. |  |
+| data-role | string \| undefined | No |  |  |  | Identifier used for testing purposes, applied to the root element of the component. |  |
+| datePickerEndAriaLabel | string \| undefined | No |  | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. |  |  |
+| datePickerEndAriaLabelledBy | string \| undefined | No |  | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. |  |  |
+| datePickerStartAriaLabel | string \| undefined | No |  | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. |  |  |
+| datePickerStartAriaLabelledBy | string \| undefined | No |  | Yes | The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`). Remove this prop; it has no effect. |  |  |
 
 ## Examples
 ### Default
diff --git a/src/__internal__/__stories__/z-index-interaction.stories.tsx b/src/__internal__/__stories__/z-index-interaction.stories.tsx
index ce4b2f6fb9..81d56576a0 100644
--- a/src/__internal__/__stories__/z-index-interaction.stories.tsx
+++ b/src/__internal__/__stories__/z-index-interaction.stories.tsx
@@ -74,8 +74,10 @@ export const DateInputInDialog: StoryObj = {
       await expect(modal).toHaveAttribute("data-state", "open");
     });
 
-    const icon = await screen.findByTestId("icon");
-    await userEvent.click(icon);
+    const calendarButton = await screen.findByRole("button", {
+      name: "Open calendar",
+    });
+    await userEvent.click(calendarButton);
 
     const datePicker = await screen.findByTestId("date-picker");
     expect(datePicker).toBeVisible();
@@ -458,11 +460,10 @@ export const DateInPopoverContainer: StoryObj = {
   play: async () => {
     if (!allowInteractions()) return;
 
-    const icon = document.querySelector(
-      '[data-component="icon"][data-element="calendar"]',
-    );
-
-    if (icon) await userEvent.click(icon);
+    const calendarButton = await screen.findByRole("button", {
+      name: "Open calendar",
+    });
+    await userEvent.click(calendarButton);
 
     const datePicker = await screen.findByTestId("date-picker");
     expect(datePicker).toBeVisible();
diff --git a/src/__internal__/input/input-style-overrides.style.ts b/src/__internal__/input/input-style-overrides.style.ts
index 17b527db36..bc32bcef44 100644
--- a/src/__internal__/input/input-style-overrides.style.ts
+++ b/src/__internal__/input/input-style-overrides.style.ts
@@ -7,8 +7,21 @@ import addFocusStyling from "../../style/utils/add-focus-styling";
 export const dateStyleOverrides = css`
   .date & {
     .input-text-container input {
-      padding: 0 0 0 12px;
-      margin-right: -12px;
+      padding-inline-end: 0;
+    }
+  }
+
+  .date-typical [data-role="date-input-wrapper"] & {
+    &:focus-within {
+      box-shadow: none;
+      outline: none;
+    }
+
+    .input-text-container input:focus {
+      border-radius: var(--global-radius-action-m) 0 0
+        var(--global-radius-action-m);
+      ${addFocusStyling()}
+      z-index: 2;
     }
   }
 `;
@@ -144,7 +157,6 @@ const searchNewBaseStyles = css`
 
     &:focus-within:has(:focus:not(button)) {
       box-shadow: none;
-      -webkit-box-shadow: none;
     }
 
     .input-text-container input[type="search"]:focus {
@@ -331,7 +343,6 @@ export const passwordStyleOverrides = css`
   [data-component="password"] & {
     &:focus-within {
       box-shadow: none !important;
-      -webkit-box-shadow: none !important;
       outline: none !important;
     }
 
diff --git a/src/__internal__/label/label.style.ts b/src/__internal__/label/label.style.ts
index edbb074a05..8f5056e02d 100644
--- a/src/__internal__/label/label.style.ts
+++ b/src/__internal__/label/label.style.ts
@@ -44,16 +44,14 @@ const StyledLabel = styled.label<StyledLabelProps>`
   ${({ $isRequired, $size, $disabled }) =>
     $isRequired &&
     css`
-      display: inline-flex;
-      align-items: center;
-
       ::after {
-        content: "*";
         color: ${$disabled
           ? "var(--input-labelset-label-disabled)"
           : "var(--input-labelset-label-required)"};
+        content: "*";
+        display: inline-block;
         font: ${getFontToken($size)};
-        margin-left: 4px;
+        margin-inline-start: 4px;
       }
     `}
 
@@ -65,7 +63,7 @@ const StyledLabel = styled.label<StyledLabelProps>`
   .fieldset-required-input & {
     ::after {
       content: "";
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 `;
diff --git a/src/__internal__/label/label.test.tsx b/src/__internal__/label/label.test.tsx
index 3bde6a4f6b..a896ea9cf6 100644
--- a/src/__internal__/label/label.test.tsx
+++ b/src/__internal__/label/label.test.tsx
@@ -120,6 +120,24 @@ test("should apply medium font to required indicator by default", () => {
   );
 });
 
+test("should apply small font to label and required indicator", () => {
+  render(
+    <Label size="small" isRequired>
+      Small Required
+    </Label>,
+  );
+
+  expect(screen.getByText("Small Required")).toHaveStyleRule(
+    "font",
+    "var(--global-font-static-comp-medium-s)",
+  );
+  expect(screen.getByText("Small Required")).toHaveStyleRule(
+    "font",
+    "var(--global-font-static-comp-medium-s)",
+    { modifier: "::after" },
+  );
+});
+
 test("should apply disabled colour and set aria-disabled when `disabled` prop is true", () => {
   render(
     <Label size="medium" disabled>
diff --git a/src/components/date-range/date-range-interaction.stories.tsx b/src/components/date-range/date-range-interaction.stories.tsx
index 4edb77685c..6177f861c8 100644
--- a/src/components/date-range/date-range-interaction.stories.tsx
+++ b/src/components/date-range/date-range-interaction.stories.tsx
@@ -121,16 +121,28 @@ export const MinMaxDateRange: Story = {
   play: async ({ canvasElement }) => {
     if (!allowInteractions()) return;
     const canvas = within(canvasElement);
-    const [startIcon, endIcon] = canvas.getAllByTestId("icon");
+    const [startCalendarButton, endCalendarButton] = canvas.getAllByRole(
+      "button",
+      { name: "Open calendar" },
+    );
     const startInput = canvas.getByRole("textbox", { name: /start date/i });
     const endInput = canvas.getByRole("textbox", { name: /end date/i });
 
-    await userEvent.click(startIcon);
-    await userEvent.keyboard("{PageUp}{End}{Enter}");
+    await userEvent.click(startCalendarButton);
+    const dateBeforeMinimum = canvas.getByRole("button", {
+      name: /Sunday, July 13th, 2025/i,
+    });
+    await expect(dateBeforeMinimum).toBeDisabled();
+    await userEvent.click(dateBeforeMinimum);
     await expect(startInput).toHaveValue("17/07/2025");
+    await userEvent.click(startCalendarButton);
 
-    await userEvent.click(endIcon);
-    await userEvent.keyboard("{PageDown}{Home}{Enter}");
+    await userEvent.click(endCalendarButton);
+    const dateAfterMaximum = canvas.getByRole("button", {
+      name: /Thursday, July 31st, 2025/i,
+    });
+    await expect(dateAfterMaximum).toBeDisabled();
+    await userEvent.click(dateAfterMaximum);
     await expect(endInput).toHaveValue("20/07/2025");
   },
 };
@@ -158,14 +170,28 @@ export const DisabledDaysDateRange: Story = {
   play: async ({ canvasElement }) => {
     if (!allowInteractions()) return;
     const canvas = within(canvasElement);
-    const [startIcon, endIcon] = canvas.getAllByTestId("icon");
+    const [startCalendarButton, endCalendarButton] = canvas.getAllByRole(
+      "button",
+      { name: "Open calendar" },
+    );
+    const startInput = canvas.getByRole("textbox", { name: /start date/i });
     const endInput = canvas.getByRole("textbox", { name: /end date/i });
 
-    await userEvent.click(startIcon);
-    await userEvent.keyboard("{ArrowLeft}{Enter}");
-
-    await userEvent.click(endIcon);
-    await userEvent.keyboard("{ArrowRight}{ArrowDown}");
+    await userEvent.click(startCalendarButton);
+    const disabledRangeDate = canvas.getByRole("button", {
+      name: /Wednesday, July 16th, 2025/i,
+    });
+    await expect(disabledRangeDate).toBeDisabled();
+    await userEvent.click(disabledRangeDate);
+    await expect(startInput).toHaveValue("10/07/2025");
+    await userEvent.click(startCalendarButton);
+
+    await userEvent.click(endCalendarButton);
+    const disabledWeekendDate = canvas.getByRole("button", {
+      name: /Saturday, July 26th, 2025/i,
+    });
+    await expect(disabledWeekendDate).toBeDisabled();
+    await userEvent.click(disabledWeekendDate);
     await expect(endInput).toHaveValue("25/07/2025");
   },
 };
@@ -183,20 +209,13 @@ export const FocusStateDateRange: Story = {
     if (!allowInteractions()) return;
     const canvas = within(canvasElement);
 
-    const [startIcon] = canvas.getAllByTestId("icon");
-    await userEvent.click(startIcon);
+    const [startCalendarButton] = canvas.getAllByRole("button", {
+      name: "Open calendar",
+    });
+    await userEvent.click(startCalendarButton);
 
     const selectedDayBtn = canvas.getByRole("button", { name: /selected$/i });
 
-    const doc = canvasElement.ownerDocument as Document;
-    for (let i = 0; i < 6 && doc.activeElement !== selectedDayBtn; i += 1) {
-      await userEvent.tab();
-    }
-
-    if (doc.activeElement !== selectedDayBtn) {
-      (selectedDayBtn as HTMLElement).focus();
-    }
-
     await expect(selectedDayBtn).toHaveFocus();
   },
 };
@@ -259,6 +278,7 @@ export const LocaleDeDateRange: Story = {
           ariaLabels: {
             previousMonthButton: () => "de-DE-previous",
             nextMonthButton: () => "de-DE-next",
+            chooseMonth: () => "de-DE-month",
           },
         },
       }}
@@ -275,12 +295,18 @@ export const LocaleDeDateRange: Story = {
     if (!allowInteractions()) return;
 
     const canvas = within(canvasElement);
-    const [startIcon] = canvas.getAllByTestId("icon");
-    await userEvent.click(startIcon);
+    const [startCalendarButton] = canvas.getAllByRole("button", {
+      name: "Open calendar",
+    });
+    await userEvent.click(startCalendarButton);
 
-    const prevMonth = canvas.getByRole("button", { name: /de-DE-previous/i });
-    await userEvent.click(prevMonth);
-    await expect(prevMonth).toHaveFocus();
+    const monthSelect = canvas.getByRole("combobox", {
+      name: /de-DE-month/i,
+    });
+    await userEvent.selectOptions(monthSelect, "5");
+    await expect(monthSelect).toHaveValue("5");
+    await expect(monthSelect).toHaveDisplayValue("Juni");
+    await expect(monthSelect).toHaveFocus();
   },
 };
 
@@ -298,8 +324,10 @@ export const TypingSyncDateRange: Story = {
 
     const canvas = within(canvasElement);
 
-    const [startIcon] = canvas.getAllByTestId("icon");
-    await userEvent.click(startIcon);
+    const [startCalendarButton] = canvas.getAllByRole("button", {
+      name: "Open calendar",
+    });
+    await userEvent.click(startCalendarButton);
 
     const startInput = canvas.getByRole("textbox", { name: /start date/i });
     await userEvent.clear(startInput);
@@ -323,12 +351,17 @@ export const MonthYearNavigationDateRange: Story = {
   ),
   play: async ({ canvasElement }) => {
     if (!allowInteractions()) return;
-    const c = within(canvasElement);
-    const [startIcon] = c.getAllByTestId("icon");
-    await userEvent.click(startIcon);
-    const next = c.getByRole("button", { name: /next month/i });
-    await userEvent.click(next);
-    await expect(next).toHaveFocus();
+    const canvas = within(canvasElement);
+    const [startCalendarButton] = canvas.getAllByRole("button", {
+      name: "Open calendar",
+    });
+    await userEvent.click(startCalendarButton);
+    const monthSelect = canvas.getByRole("combobox", {
+      name: "Choose the month",
+    });
+    await userEvent.selectOptions(monthSelect, "7");
+    await expect(monthSelect).toHaveValue("7");
+    await expect(monthSelect).toHaveFocus();
   },
 };
 MonthYearNavigationDateRange.parameters = {
diff --git a/src/components/date-range/date-range.component.tsx b/src/components/date-range/date-range.component.tsx
index 1cdcfaa1b2..4d0fed9396 100644
--- a/src/components/date-range/date-range.component.tsx
+++ b/src/components/date-range/date-range.component.tsx
@@ -11,7 +11,7 @@ import {
   formattedValue,
   parseISODate,
   checkISOFormatAndLength,
-} from "../date/__internal__/utils";
+} from "../date/__internal__/utils/utils";
 import DateInput, { DateChangeEvent, DateInputProps } from "../date";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent, {
@@ -116,13 +116,25 @@ export interface DateRangeProps
   required?: boolean;
   /** Date format string to be applied to the date inputs */
   dateFormatOverride?: string;
-  /** Prop to specify the aria-label attribute of the start date picker */
+  /**
+   * @deprecated The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`).
+   * Remove this prop; it has no effect.
+   */
   datePickerStartAriaLabel?: string;
-  /** Prop to specify the aria-labelledby attribute of the start date picker */
+  /**
+   * @deprecated The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`).
+   * Remove this prop; it has no effect.
+   */
   datePickerStartAriaLabelledBy?: string;
-  /** Prop to specify the aria-label attribute of the end date picker */
+  /**
+   * @deprecated The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`).
+   * Remove this prop; it has no effect.
+   */
   datePickerEndAriaLabel?: string;
-  /** Prop to specify the aria-labelledby attribute of the end date picker */
+  /**
+   * @deprecated The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`).
+   * Remove this prop; it has no effect.
+   */
   datePickerEndAriaLabelledBy?: string;
   /** Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set */
   validationMessagePositionTop?: boolean;
diff --git a/src/components/date-range/date-range.mdx b/src/components/date-range/date-range.mdx
index 77c82f4e18..9dbe034d8b 100644
--- a/src/components/date-range/date-range.mdx
+++ b/src/components/date-range/date-range.mdx
@@ -53,15 +53,17 @@ You can use the `required` prop to indicate if the fields are mandatory.
 <Canvas of={DateRangeStories.Required} />
 
 ### With disabled dates
-You can disable dates by using `startDateProps` and `endDateProps`, which allow you to pass properties directly to the start or end date. 
+
+You can disable dates by using `startDateProps` and `endDateProps`, which allow you to pass properties directly to the start or end date.
 For example, you can set a `minDate` or `maxDate`, or use `pickerProps` with a `disabled` option that accepts a matcher or an array of [matchers](https://daypicker.dev/api/type-aliases/Matcher#example).
 
 <Canvas of={DateRangeStories.WithDisabledDates} />
 
 ### Locale override
 
-The examples below illustrates how to override the locale passed into the DateRange component. In this example it has been set up for
-the French locale. Required locales can be imported like so `import { fr } from 'date-fns/locale';`
+The example below illustrates how to override the locale passed into the DateRange component. Locale values are merged with `en-GB`,
+so omitted accessibility labels fall back to British English. Applications should provide approved translations through
+`I18nProvider` for every language they support. Required date locales can be imported like so `import { fr } from 'date-fns/locale';`
 
 <Canvas of={DateRangeStories.LocaleOverrideExampleImplementation} />
 
diff --git a/src/components/date-range/date-range.test.tsx b/src/components/date-range/date-range.test.tsx
index ff33fd914b..1903458fdc 100644
--- a/src/components/date-range/date-range.test.tsx
+++ b/src/components/date-range/date-range.test.tsx
@@ -667,65 +667,23 @@ test("should close the open 'start' picker when the user moves focus to the `end
   const startDate = screen.getByTestId("start");
   const endDate = screen.getByTestId("end");
 
-  const startCalendarIcon = screen.getAllByTestId("input-icon-toggle")[0];
-  await user.click(startCalendarIcon);
+  const startCalendarButton = within(startDate).getByRole("button", {
+    name: "Open calendar",
+  });
+  await user.click(startCalendarButton);
 
   expect(within(startDate).getByRole("grid")).toBeVisible();
   expect(within(endDate).queryByRole("grid")).not.toBeInTheDocument();
 
-  const endCalendarIcon = screen.getAllByTestId("input-icon-toggle")[1];
-  await user.click(endCalendarIcon);
+  const endCalendarButton = within(endDate).getByRole("button", {
+    name: "Open calendar",
+  });
+  await user.click(endCalendarButton);
 
   expect(within(endDate).getByRole("grid")).toBeVisible();
   expect(within(startDate).queryByRole("grid")).not.toBeInTheDocument();
 });
 
-test("should apply aria-label and aria-labelledby to the date picker region", async () => {
-  const user = userEvent.setup();
-  render(
-    <DateRange
-      startLabel="start"
-      endLabel="end"
-      value={["10/10/2016", "11/11/2016"]}
-      onChange={() => {}}
-      startDateProps={{ disablePortal: true, "data-role": "start" }}
-      endDateProps={{ disablePortal: true, "data-role": "end" }}
-      datePickerStartAriaLabel="start aria-label"
-      datePickerStartAriaLabelledBy="start aria-labelledby"
-      datePickerEndAriaLabel="end aria-label"
-      datePickerEndAriaLabelledBy="end aria-labelledby"
-    />,
-  );
-  const startDate = screen.getByTestId("start");
-  const endDate = screen.getByTestId("end");
-
-  const startCalendarIcon = screen.getAllByTestId("input-icon-toggle")[0];
-  await user.click(startCalendarIcon);
-
-  expect(within(startDate).getByRole("region")).toBeVisible();
-  expect(within(startDate).getByRole("region")).toHaveAttribute(
-    "aria-label",
-    "start aria-label",
-  );
-  expect(within(startDate).getByRole("region")).toHaveAttribute(
-    "aria-labelledby",
-    "start aria-labelledby",
-  );
-
-  const endCalendarIcon = screen.getAllByTestId("input-icon-toggle")[1];
-  await user.click(endCalendarIcon);
-
-  expect(within(endDate).getByRole("region")).toBeVisible();
-  expect(within(endDate).getByRole("region")).toHaveAttribute(
-    "aria-label",
-    "end aria-label",
-  );
-  expect(within(endDate).getByRole("region")).toHaveAttribute(
-    "aria-labelledby",
-    "end aria-labelledby",
-  );
-});
-
 test("should close the open 'end' picker when the user moves focus to the `start` input", async () => {
   const user = userEvent.setup();
   render(
@@ -741,14 +699,18 @@ test("should close the open 'end' picker when the user moves focus to the `start
   const startDate = screen.getByTestId("start");
   const endDate = screen.getByTestId("end");
 
-  const endCalendarIcon = screen.getAllByTestId("input-icon-toggle")[1];
-  await user.click(endCalendarIcon);
+  const endCalendarButton = within(endDate).getByRole("button", {
+    name: "Open calendar",
+  });
+  await user.click(endCalendarButton);
 
   expect(within(endDate).getByRole("grid")).toBeVisible();
   expect(within(startDate).queryByRole("grid")).not.toBeInTheDocument();
 
-  const startCalendarIcon = screen.getAllByTestId("input-icon-toggle")[0];
-  await user.click(startCalendarIcon);
+  const startCalendarButton = within(startDate).getByRole("button", {
+    name: "Open calendar",
+  });
+  await user.click(startCalendarButton);
 
   expect(within(startDate).getByRole("grid")).toBeVisible();
   expect(within(endDate).queryByRole("grid")).not.toBeInTheDocument();
@@ -1197,6 +1159,9 @@ describe("Locale formatting overrides", () => {
             ariaLabels: {
               nextMonthButton: () => "foo",
               previousMonthButton: () => "foo",
+              chooseMonth: () => "Choose the month",
+              chooseYear: () => "Choose the year",
+              closeButton: () => "Close",
             },
             dateFnsLocale: () => enGBLocale,
             dateFormatOverride: "y-m-ddd",
diff --git a/src/components/date/__internal__/calendar/calendar-close-button.component.tsx b/src/components/date/__internal__/calendar/calendar-close-button.component.tsx
new file mode 100644
index 0000000000..87f5984744
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-close-button.component.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+import StyledCalendarCloseButton from "./calendar-close-button.style";
+
+interface CalendarCloseButtonProps {
+  children: React.ReactNode;
+  onClick: (
+    event:
+      | React.MouseEvent<HTMLAnchorElement>
+      | React.MouseEvent<HTMLButtonElement>,
+  ) => void;
+}
+
+const CalendarCloseButton = ({
+  children,
+  onClick,
+}: CalendarCloseButtonProps) => (
+  <StyledCalendarCloseButton
+    data-role="date-picker-close"
+    type="button"
+    variant="default"
+    variantType="subtle"
+    size="small"
+    onClick={onClick}
+  >
+    {children}
+  </StyledCalendarCloseButton>
+);
+
+export default CalendarCloseButton;
diff --git a/src/components/date/__internal__/calendar/calendar-close-button.style.ts b/src/components/date/__internal__/calendar/calendar-close-button.style.ts
new file mode 100644
index 0000000000..56a3c8c5be
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-close-button.style.ts
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+import Button from "../../../button/__next__";
+
+const StyledCalendarCloseButton = styled(Button)`
+  align-self: flex-end;
+  padding-block: var(--global-space-comp-xs);
+`;
+
+export default StyledCalendarCloseButton;
diff --git a/src/components/date/__internal__/calendar/calendar-day-button.component.tsx b/src/components/date/__internal__/calendar/calendar-day-button.component.tsx
new file mode 100644
index 0000000000..e196c92802
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-day-button.component.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from "react";
+import type { DayPickerProps } from "react-day-picker";
+
+import Typography from "../../../typography";
+
+type CalendarDayButtonProps = Parameters<
+  NonNullable<NonNullable<DayPickerProps["components"]>["DayButton"]>
+>[0];
+
+const CalendarDayButton = ({
+  day: _day,
+  modifiers,
+  children,
+  "aria-label": ariaLabel,
+  ...buttonProps
+}: CalendarDayButtonProps) => {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <button ref={ref} {...buttonProps}>
+      {ariaLabel ? (
+        <>
+          <span aria-hidden="true">{children}</span>
+          <Typography as="span" variant="span" screenReaderOnly>
+            {ariaLabel}
+          </Typography>
+        </>
+      ) : (
+        children
+      )}
+      {modifiers.today && (
+        <span data-role="date-picker-today-indicator" aria-hidden="true" />
+      )}
+    </button>
+  );
+};
+
+export default CalendarDayButton;
diff --git a/src/components/date/__internal__/calendar/calendar-navigation.component.tsx b/src/components/date/__internal__/calendar/calendar-navigation.component.tsx
new file mode 100644
index 0000000000..2cc4f578a9
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-navigation.component.tsx
@@ -0,0 +1,64 @@
+import type { Month as DateFnsMonth } from "date-fns";
+import React from "react";
+
+import useLocale from "../../../../hooks/__internal__/useLocale";
+import CalendarNavigationContainer from "./calendar-navigation.style";
+import CalendarSelect from "./calendar-select";
+
+interface CalendarNavigationProps {
+  displayedMonth: Date;
+  monthSelectId: string;
+  yearSelectId: string;
+  years: number[];
+  localize?: {
+    month: (month: DateFnsMonth, options?: { width?: "wide" }) => string;
+  };
+  onMonthChange: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
+  onYearChange: (ev: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+
+const CalendarNavigation = ({
+  displayedMonth,
+  monthSelectId,
+  yearSelectId,
+  years,
+  localize,
+  onMonthChange,
+  onYearChange,
+}: CalendarNavigationProps) => {
+  const locale = useLocale();
+  const displayedYear = displayedMonth.getFullYear();
+  const monthOptions = Array.from({ length: 12 }, (_, month) => ({
+    value: month,
+    label: localize?.month(month as DateFnsMonth) || String(month + 1),
+  }));
+
+  return (
+    <CalendarNavigationContainer
+      data-component="date-picker-navigation"
+      data-element="date-picker-navigation"
+      data-role="date-picker-navigation"
+    >
+      <CalendarSelect
+        id={monthSelectId}
+        data-element="date-picker-month-selector"
+        data-role="date-picker-month-selector"
+        aria-label={locale.date.ariaLabels.chooseMonth?.()}
+        options={monthOptions}
+        value={displayedMonth.getMonth()}
+        onChange={onMonthChange}
+      />
+      <CalendarSelect
+        id={yearSelectId}
+        data-element="date-picker-year-selector"
+        data-role="date-picker-year-selector"
+        aria-label={locale.date.ariaLabels.chooseYear?.()}
+        options={years.map((year) => ({ value: year, label: String(year) }))}
+        value={displayedYear}
+        onChange={onYearChange}
+      />
+    </CalendarNavigationContainer>
+  );
+};
+
+export default CalendarNavigation;
diff --git a/src/components/date/__internal__/calendar/calendar-navigation.style.ts b/src/components/date/__internal__/calendar/calendar-navigation.style.ts
new file mode 100644
index 0000000000..6a23aa7e3c
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-navigation.style.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const CalendarNavigation = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: var(--date-picker-grid-width);
+  max-width: 100%;
+  min-height: var(--global-size-s);
+  margin: 0 auto;
+`;
+
+export default CalendarNavigation;
diff --git a/src/components/date/__internal__/calendar/calendar-navigation.test.tsx b/src/components/date/__internal__/calendar/calendar-navigation.test.tsx
new file mode 100644
index 0000000000..9f1aa69849
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-navigation.test.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { enUS as enUSLocale } from "date-fns/locale/en-US";
+
+import CalendarNavigation from "./calendar-navigation.component";
+
+const noop = () => {};
+
+const getMonthSelect = () =>
+  within(screen.getByTestId("date-picker-month-selector")).getByRole(
+    "combobox",
+  );
+
+const getYearSelect = () =>
+  within(screen.getByTestId("date-picker-year-selector")).getByRole("combobox");
+
+test("year select is enabled when more than one year is selectable", () => {
+  render(
+    <CalendarNavigation
+      displayedMonth={new Date(2024, 5, 1)}
+      monthSelectId="month"
+      yearSelectId="year"
+      years={[2023, 2024, 2025]}
+      onMonthChange={noop}
+      onYearChange={noop}
+    />,
+  );
+
+  expect(getYearSelect()).toBeEnabled();
+});
+
+test("year select remains enabled when only one year is selectable", () => {
+  render(
+    <CalendarNavigation
+      displayedMonth={new Date(2024, 5, 1)}
+      monthSelectId="month"
+      yearSelectId="year"
+      years={[2024]}
+      onMonthChange={noop}
+      onYearChange={noop}
+    />,
+  );
+
+  expect(getYearSelect()).toBeEnabled();
+});
+
+test("year select remains enabled when no years are selectable", () => {
+  render(
+    <CalendarNavigation
+      displayedMonth={new Date(2024, 5, 1)}
+      monthSelectId="month"
+      yearSelectId="year"
+      years={[]}
+      onMonthChange={noop}
+      onYearChange={noop}
+    />,
+  );
+
+  expect(getYearSelect()).toBeEnabled();
+});
+
+test("month select options are never disabled", () => {
+  render(
+    <CalendarNavigation
+      displayedMonth={new Date(2024, 5, 1)}
+      monthSelectId="month"
+      yearSelectId="year"
+      years={[2024, 2025]}
+      localize={enUSLocale.localize}
+      onMonthChange={noop}
+      onYearChange={noop}
+    />,
+  );
+
+  const monthSelect = getMonthSelect();
+  expect(monthSelect).toBeEnabled();
+  expect(
+    within(monthSelect).getByRole("option", { name: "January" }),
+  ).toBeEnabled();
+  expect(
+    within(monthSelect).getByRole("option", { name: "June" }),
+  ).toBeEnabled();
+  expect(
+    within(monthSelect).getByRole("option", { name: "December" }),
+  ).toBeEnabled();
+});
+
+test("calls onMonthChange and onYearChange when the user picks a value", async () => {
+  const user = userEvent.setup();
+  const onMonthChange = jest.fn();
+  const onYearChange = jest.fn();
+
+  render(
+    <CalendarNavigation
+      displayedMonth={new Date(2024, 5, 1)}
+      monthSelectId="month"
+      yearSelectId="year"
+      years={[2023, 2024, 2025]}
+      onMonthChange={onMonthChange}
+      onYearChange={onYearChange}
+    />,
+  );
+
+  await user.selectOptions(getMonthSelect(), "7");
+  expect(onMonthChange).toHaveBeenCalledTimes(1);
+
+  await user.selectOptions(getYearSelect(), "2025");
+  expect(onYearChange).toHaveBeenCalledTimes(1);
+});
diff --git a/src/components/date/__internal__/calendar/calendar-select/calendar-select.component.tsx b/src/components/date/__internal__/calendar/calendar-select/calendar-select.component.tsx
new file mode 100644
index 0000000000..50522c011f
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-select/calendar-select.component.tsx
@@ -0,0 +1,85 @@
+import React, { forwardRef } from "react";
+
+import tagComponent, {
+  TagProps,
+} from "../../../../../__internal__/utils/helpers/tags/tags";
+import Icon from "../../../../icon";
+
+import {
+  StyledIcon,
+  StyledSelect,
+  StyledWrapper,
+} from "./calendar-select.style";
+import useCustomizableSelectMarkup from "./useCustomizableSelectMarkup";
+
+export interface CalendarSelectOption {
+  value: string | number;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface CalendarSelectProps
+  extends Omit<
+      React.SelectHTMLAttributes<HTMLSelectElement>,
+      "children" | "multiple" | "size"
+    >,
+    TagProps {
+  options?: CalendarSelectOption[];
+}
+
+export const CalendarSelect = forwardRef<
+  HTMLSelectElement,
+  CalendarSelectProps
+>(
+  (
+    {
+      className,
+      disabled,
+      options,
+      value,
+      "data-element": dataElement,
+      "data-role": dataRole,
+      ...rest
+    },
+    ref,
+  ) => {
+    const valueProps =
+      value === undefined ? {} : { value: String(value ?? "") };
+    const selectRef = useCustomizableSelectMarkup(ref);
+
+    return (
+      <StyledWrapper
+        $disabled={disabled}
+        className={className}
+        {...tagComponent("calendar-select", {
+          "data-element": dataElement,
+          "data-role": dataRole,
+        })}
+      >
+        <StyledSelect
+          ref={selectRef}
+          disabled={disabled}
+          {...valueProps}
+          {...rest}
+        >
+          {options?.map((option) => (
+            <option
+              key={String(option.value)}
+              value={String(option.value)}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </StyledSelect>
+        <StyledIcon aria-hidden $disabled={disabled}>
+          <Icon type="caret_down" />
+        </StyledIcon>
+      </StyledWrapper>
+    );
+  },
+);
+
+CalendarSelect.displayName = "CalendarSelect";
+
+export default CalendarSelect;
diff --git a/src/components/date/__internal__/calendar/calendar-select/calendar-select.style.ts b/src/components/date/__internal__/calendar/calendar-select/calendar-select.style.ts
new file mode 100644
index 0000000000..1479c90f88
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-select/calendar-select.style.ts
@@ -0,0 +1,178 @@
+import styled, { css } from "styled-components";
+import addFocusStyling from "../../../../../style/utils/add-focus-styling";
+
+const MAX_VISIBLE_OPTIONS = 12;
+
+export const StyledWrapper = styled.div<{ $disabled?: boolean }>`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+  min-width: var(--global-size-4-xl);
+  color: var(--input-dropdown-label-default);
+
+  ${({ $disabled }) =>
+    $disabled &&
+    css`
+      color: var(--input-dropdown-label-disabled);
+    `}
+`;
+
+export const StyledSelect = styled.select`
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: var(--input-typical-bg-default);
+  border: none;
+  outline: none;
+  border-radius: var(--global-radius-container-m);
+  padding: var(--global-space-comp-xs)
+    calc(
+      var(--global-space-comp-m) + var(--global-size-2-xs) +
+        var(--global-space-comp-xs)
+    )
+    var(--global-space-comp-xs) var(--global-space-comp-m);
+  min-height: var(--global-size-s);
+  min-width: var(--global-size-4-xl);
+  width: auto;
+  font: var(--global-font-static-comp-medium-s);
+  color: inherit;
+  text-align: left;
+
+  &:focus-visible {
+    ${addFocusStyling()}
+    position: relative;
+    z-index: 2;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:open {
+    background: var(--popover-bg-default);
+    border-radius: var(--global-radius-container-m);
+  }
+
+  option {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    box-sizing: border-box;
+    height: var(--global-size-s);
+    min-height: var(--global-size-s);
+    padding: var(--global-space-none);
+    padding-inline-end: var(--global-space-comp-m);
+    font: var(--global-font-static-comp-regular-s);
+    background: var(--popover-bg-default);
+    color: var(--input-dropdown-label-default);
+    text-align: left;
+  }
+
+  option:checked {
+    color: var(--input-dropdown-label-alt);
+  }
+
+  @supports (appearance: base-select) {
+    &,
+    &::picker(select) {
+      appearance: base-select;
+    }
+
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      color: inherit;
+      font: inherit;
+    }
+
+    [data-calendar-select-selected-content] {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    &::picker(select) {
+      --calendar-select-option-block-size: var(--global-size-s);
+      --calendar-select-picker-padding-block: var(--global-space-comp-xs);
+
+      box-sizing: border-box;
+      padding: var(--global-space-comp-xs) 0;
+      background: var(--popover-bg-default);
+      border: none;
+      border-radius: var(--global-radius-container-m);
+      box-shadow: var(--global-depth-lvl1);
+      /* Limit the picker to 12 option rows and include its block padding so
+       * the final visible row is not clipped. */
+      max-block-size: calc(
+        ${MAX_VISIBLE_OPTIONS} * var(--calendar-select-option-block-size) + 2 *
+          var(--calendar-select-picker-padding-block)
+      );
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+    &::picker-icon {
+      display: none;
+    }
+
+    option::checkmark {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--global-size-2-xs);
+      height: var(--global-size-2-xs);
+      margin: 0;
+      color: var(--input-dropdown-label-alt);
+      font-family: CarbonIcons, sans-serif;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: normal;
+      line-height: 12px;
+      content: "\\f003";
+    }
+
+    option:hover,
+    option:focus {
+      color: var(--input-dropdown-label-hover);
+    }
+
+    option:hover {
+      background: var(--input-dropdown-bg-hover);
+    }
+
+    option:focus,
+    option:focus-visible {
+      ${addFocusStyling(true)}
+      color: var(--input-dropdown-label-hover);
+    }
+  }
+`;
+
+export const StyledIcon = styled.span<{ $disabled?: boolean }>`
+  position: absolute;
+  inset-inline-end: var(--global-space-comp-m);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--global-size-2-xs);
+  height: var(--global-size-2-xs);
+  pointer-events: none;
+
+  [data-component="icon"] {
+    color: ${({ $disabled }) =>
+      $disabled
+        ? "var(--input-dropdown-label-disabled)"
+        : "var(--input-dropdown-label-default)"};
+    font-size: var(--global-size-3-xs);
+    height: var(--global-size-4-xs);
+    width: var(--global-size-3-xs);
+  }
+`;
diff --git a/src/components/date/__internal__/calendar/calendar-select/calendar-select.test.tsx b/src/components/date/__internal__/calendar/calendar-select/calendar-select.test.tsx
new file mode 100644
index 0000000000..4c52c9e1b9
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-select/calendar-select.test.tsx
@@ -0,0 +1,309 @@
+import React from "react";
+import { act, render, renderHook, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import CalendarSelect from "./index";
+import useCustomizableSelectMarkup from "./useCustomizableSelectMarkup";
+
+const options = [
+  { value: 0, label: "January" },
+  { value: 1, label: "February", disabled: true },
+  { value: "2", label: "March" },
+];
+
+const noop = () => {};
+
+test("renders options and coerces values to strings", () => {
+  render(
+    <CalendarSelect
+      aria-label="Choose month"
+      onChange={noop}
+      options={options}
+      value={0}
+    />,
+  );
+
+  const selector = screen.getByRole("combobox", { name: "Choose month" });
+  expect(selector).toHaveValue("0");
+  expect(screen.getByRole("option", { name: "January" })).toHaveValue("0");
+  expect(screen.getByRole("option", { name: "March" })).toHaveValue("2");
+});
+
+test("passes native select props to the select element", async () => {
+  const user = userEvent.setup();
+  const onChange = jest.fn();
+  const onBlur = jest.fn();
+  const onFocus = jest.fn();
+
+  render(
+    <CalendarSelect
+      aria-label="Choose month"
+      name="month"
+      required
+      options={options}
+      value={0}
+      onBlur={onBlur}
+      onChange={onChange}
+      onFocus={onFocus}
+    />,
+  );
+
+  const selector = screen.getByRole("combobox", { name: "Choose month" });
+  expect(selector).toHaveAttribute("name", "month");
+  expect(selector).toBeRequired();
+
+  await user.click(selector);
+  expect(onFocus).toHaveBeenCalled();
+
+  await user.selectOptions(selector, "2");
+  expect(onChange).toHaveBeenCalledTimes(1);
+
+  await user.tab();
+  expect(onBlur).toHaveBeenCalled();
+});
+
+test("supports native uncontrolled usage with defaultValue", () => {
+  render(
+    <CalendarSelect
+      aria-label="Choose month"
+      defaultValue="2"
+      options={options}
+    />,
+  );
+
+  expect(screen.getByRole("combobox", { name: "Choose month" })).toHaveValue(
+    "2",
+  );
+});
+
+test("supports accessible naming with aria-labelledby and descriptions", () => {
+  render(
+    <>
+      <span id="month-label">Month</span>
+      <span id="month-hint">Pick a month</span>
+      <CalendarSelect
+        aria-describedby="month-hint"
+        aria-labelledby="month-label"
+        onChange={noop}
+        options={options}
+        value={0}
+      />
+    </>,
+  );
+
+  const selector = screen.getByRole("combobox", { name: "Month" });
+  expect(selector).toHaveAccessibleDescription("Pick a month");
+});
+
+test("renders disabled option and disabled select states", () => {
+  render(
+    <CalendarSelect
+      aria-label="Choose month"
+      disabled
+      onChange={noop}
+      options={options}
+      value={0}
+    />,
+  );
+
+  expect(screen.getByRole("combobox", { name: "Choose month" })).toBeDisabled();
+  expect(screen.getByRole("option", { name: "February" })).toBeDisabled();
+});
+
+test("applies carbon data tags to the root element", () => {
+  render(
+    <CalendarSelect
+      aria-label="Choose month"
+      data-element="month-selector"
+      data-role="date-picker-month-selector"
+      onChange={noop}
+      options={options}
+      value={0}
+    />,
+  );
+
+  const wrapper = screen.getByTestId("date-picker-month-selector");
+  expect(wrapper).toHaveAttribute("data-component", "calendar-select");
+  expect(wrapper).toHaveAttribute("data-element", "month-selector");
+});
+
+test("does not add an extra tab stop for the customizable select button", async () => {
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <button type="button">Before</button>
+      <CalendarSelect
+        aria-label="Choose month"
+        onChange={noop}
+        options={options}
+        value={0}
+      />
+      <button type="button">After</button>
+    </>,
+  );
+
+  await user.tab();
+  expect(screen.getByRole("button", { name: "Before" })).toHaveFocus();
+
+  await user.tab();
+  expect(screen.getByRole("combobox", { name: "Choose month" })).toHaveFocus();
+
+  await user.tab();
+  expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+});
+
+test("exposes the native select element through ref", () => {
+  const ref = React.createRef<HTMLSelectElement>();
+
+  render(
+    <CalendarSelect
+      ref={ref}
+      aria-label="Choose month"
+      onChange={noop}
+      options={options}
+      value={0}
+    />,
+  );
+
+  expect(ref.current).toBe(screen.getByRole("combobox"));
+});
+
+test("supports a callback ref and a null controlled value", () => {
+  const ref = jest.fn();
+
+  render(
+    <CalendarSelect
+      ref={ref}
+      aria-label="Choose month"
+      onChange={noop}
+      options={[{ value: "", label: "None" }, ...options]}
+      value={null as unknown as string}
+    />,
+  );
+
+  expect(ref).toHaveBeenCalledWith(screen.getByRole("combobox"));
+  expect(screen.getByRole("combobox")).toHaveValue("");
+});
+
+test("preserves customizable-select markup when React updates options", () => {
+  const ref = React.createRef<HTMLSelectElement>();
+  const { rerender } = render(
+    <CalendarSelect
+      ref={ref}
+      aria-label="Choose month"
+      onChange={noop}
+      options={options.slice(0, 2)}
+      value={0}
+    />,
+  );
+
+  const select = screen.getByRole("combobox", { name: "Choose month" });
+  /* eslint-disable testing-library/no-node-access -- selectedcontent and the
+   * customizable select button are browser markup with no Testing Library role. */
+  const selectButton = select.querySelector(":scope > button");
+  const selectedContent = selectButton?.querySelector("selectedcontent");
+
+  // React 18 cannot create this new browser markup itself, so our hook adds it.
+  // Updating the options must not make React remove it or add a second copy.
+  expect(select.firstElementChild).toBe(selectButton);
+  expect(selectedContent).toBeInTheDocument();
+
+  rerender(
+    <CalendarSelect
+      ref={ref}
+      aria-label="Choose month"
+      onChange={noop}
+      options={[
+        { value: 2, label: "March" },
+        { value: 1, label: "February", disabled: true },
+        { value: 3, label: "April" },
+      ]}
+      value={2}
+    />,
+  );
+
+  expect(ref.current).toBe(select);
+  expect(select).toHaveValue("2");
+  expect(select.querySelectorAll(":scope > button")).toHaveLength(1);
+  expect(select.firstElementChild).toBe(selectButton);
+  expect(selectButton?.querySelector("selectedcontent")).toBe(selectedContent);
+  /* eslint-enable testing-library/no-node-access */
+  expect(
+    screen.queryByRole("option", { name: "January" }),
+  ).not.toBeInTheDocument();
+  expect(screen.getByRole("option", { name: "March" })).toHaveValue("2");
+  expect(screen.getByRole("option", { name: "February" })).toBeDisabled();
+  expect(screen.getByRole("option", { name: "April" })).toHaveValue("3");
+});
+
+test("does not duplicate existing customizable-select markup after the ref changes", () => {
+  const firstRef = jest.fn();
+  const secondRef = jest.fn();
+  const { rerender } = render(
+    <CalendarSelect
+      ref={firstRef}
+      aria-label="Choose month"
+      options={options}
+    />,
+  );
+  const select = screen.getByRole("combobox");
+
+  rerender(
+    <CalendarSelect
+      ref={secondRef}
+      aria-label="Choose month"
+      options={options}
+    />,
+  );
+
+  /* eslint-disable-next-line testing-library/no-node-access -- customizable
+   * select markup has no Testing Library role in React 18. */
+  expect(select.querySelectorAll(":scope > button")).toHaveLength(1);
+  expect(secondRef).toHaveBeenCalledWith(select);
+});
+
+/* eslint-disable testing-library/no-node-access -- these tests exercise
+ * standardized customizable-select child markup, which has no RTL role. */
+test("leaves complete customizable-select markup unchanged", () => {
+  const select = document.createElement("select");
+  const button = document.createElement("button");
+  button.appendChild(document.createElement("selectedcontent"));
+  select.appendChild(button);
+  const { result, rerender } = renderHook(() =>
+    useCustomizableSelectMarkup(null),
+  );
+
+  act(() => result.current(select));
+  rerender();
+
+  expect(select.firstElementChild).toBe(button);
+  expect(select.children).toHaveLength(1);
+});
+
+test("adds customizable markup when an existing button is incomplete", () => {
+  const TestSelect = () => {
+    const selectRef = useCustomizableSelectMarkup(null);
+    return (
+      <select
+        aria-label="Test select"
+        ref={(select) => {
+          if (select && !select.firstElementChild) {
+            const button = document.createElement("button");
+            button.appendChild(document.createElement("span"));
+            select.appendChild(button);
+          }
+          selectRef(select);
+        }}
+      />
+    );
+  };
+
+  render(<TestSelect />);
+  const select = screen.getByRole("combobox", { name: "Test select" });
+
+  expect(select.firstElementChild?.firstElementChild?.tagName).toBe(
+    "SELECTEDCONTENT",
+  );
+  expect(select.querySelector("selectedcontent")).toBeInTheDocument();
+});
diff --git a/src/components/date/__internal__/calendar/calendar-select/index.ts b/src/components/date/__internal__/calendar/calendar-select/index.ts
new file mode 100644
index 0000000000..245e7b6aef
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-select/index.ts
@@ -0,0 +1,5 @@
+export { default, CalendarSelect } from "./calendar-select.component";
+export type {
+  CalendarSelectOption,
+  CalendarSelectProps,
+} from "./calendar-select.component";
diff --git a/src/components/date/__internal__/calendar/calendar-select/useCustomizableSelectMarkup.server.test.ts b/src/components/date/__internal__/calendar/calendar-select/useCustomizableSelectMarkup.server.test.ts
new file mode 100644
index 0000000000..d5bef7a21c
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-select/useCustomizableSelectMarkup.server.test.ts
@@ -0,0 +1,5 @@
+import useCustomizableSelectMarkup from "./useCustomizableSelectMarkup";
+
+test("useCustomizableSelectMarkup is available in a server-side environment", () => {
+  expect(typeof useCustomizableSelectMarkup).toBe("function");
+});
diff --git a/src/components/date/__internal__/calendar/calendar-select/useCustomizableSelectMarkup.ts b/src/components/date/__internal__/calendar/calendar-select/useCustomizableSelectMarkup.ts
new file mode 100644
index 0000000000..bb7821b085
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-select/useCustomizableSelectMarkup.ts
@@ -0,0 +1,53 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+import { getWindow } from "../../../../../__internal__/dom/globals";
+
+const useIsomorphicLayoutEffect = getWindow() ? useLayoutEffect : useEffect;
+
+const useCustomizableSelectMarkup = (
+  forwardedRef: React.ForwardedRef<HTMLSelectElement>,
+) => {
+  const selectRef = useRef<HTMLSelectElement | null>(null);
+
+  const setSelectRef = useCallback(
+    (select: HTMLSelectElement | null) => {
+      selectRef.current = select;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(select);
+      } else if (forwardedRef) {
+        forwardedRef.current = select;
+      }
+    },
+    [forwardedRef],
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    const select = selectRef.current;
+    const selectButton = select?.firstElementChild;
+
+    if (
+      !select ||
+      (selectButton?.tagName === "BUTTON" &&
+        selectButton.firstElementChild?.tagName === "SELECTEDCONTENT")
+    ) {
+      return;
+    }
+
+    // React 18 does not yet accept the customizable-select button in JSX.
+    // Insert the standardized markup before paint until React supports it.
+    const button = select.ownerDocument.createElement("button");
+    const selectedContent =
+      select.ownerDocument.createElement("selectedcontent");
+    // Use an attribute selector while CSS tooling lacks <selectedcontent> support.
+    selectedContent.dataset.calendarSelectSelectedContent = "";
+    button.type = "button";
+    button.tabIndex = -1;
+    button.appendChild(selectedContent);
+    select.insertBefore(button, select.firstChild);
+  }, []);
+
+  return setSelectRef;
+};
+
+export default useCustomizableSelectMarkup;
diff --git a/src/components/date/__internal__/calendar/calendar-weekday.component.tsx b/src/components/date/__internal__/calendar/calendar-weekday.component.tsx
new file mode 100644
index 0000000000..d32b663090
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-weekday.component.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import Typography from "../../../typography";
+import StyledWeekday, {
+  StyledWeekdayText,
+  StyledWeekdayTypography,
+} from "./calendar-weekday.style";
+
+interface CalendarWeekdayProps {
+  className?: string;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+const CalendarWeekday = ({
+  className,
+  title,
+  children,
+}: CalendarWeekdayProps) => (
+  <StyledWeekday className={className} scope="col">
+    <StyledWeekdayText aria-hidden="true">
+      <StyledWeekdayTypography as="span" variant="p" m={0}>
+        {children}
+      </StyledWeekdayTypography>
+    </StyledWeekdayText>
+    {title && (
+      <Typography as="span" variant="span" screenReaderOnly>
+        {title}
+      </Typography>
+    )}
+  </StyledWeekday>
+);
+
+export default CalendarWeekday;
diff --git a/src/components/date/__internal__/calendar/calendar-weekday.style.ts b/src/components/date/__internal__/calendar/calendar-weekday.style.ts
new file mode 100644
index 0000000000..34d689faa8
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar-weekday.style.ts
@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import Typography from "../../../typography";
+import type { TypographyProps } from "../../../typography";
+
+const StyledWeekday = styled.th`
+  border: none;
+  box-sizing: border-box;
+  width: var(--date-picker-day-cell-size);
+  min-width: var(--date-picker-day-cell-size);
+  height: var(--date-picker-day-cell-size);
+  min-height: var(--date-picker-day-cell-size);
+  padding: var(--global-space-none);
+  text-align: center;
+  vertical-align: middle;
+`;
+
+export const StyledWeekdayText = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--date-picker-day-cell-size);
+  height: var(--date-picker-day-cell-size);
+`;
+
+export const StyledWeekdayTypography = styled(Typography)<TypographyProps>`
+  && {
+    font: var(--global-font-static-comp-medium-s);
+    color: var(--input-calendar-txt-alt);
+  }
+`;
+
+export default StyledWeekday;
diff --git a/src/components/date/__internal__/calendar/calendar.component.tsx b/src/components/date/__internal__/calendar/calendar.component.tsx
new file mode 100644
index 0000000000..d1951cf6a4
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar.component.tsx
@@ -0,0 +1,130 @@
+import React from "react";
+import {
+  DayPicker,
+  defaultLocale,
+  getDefaultClassNames,
+  type DayPickerProps,
+} from "react-day-picker";
+
+import { getDisabledDays } from "../utils/utils";
+import CalendarDayButton from "./calendar-day-button.component";
+import CalendarWeekday from "./calendar-weekday.component";
+
+const weekdayIndexes = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6,
+} as const;
+
+const defaultClassNames = getDefaultClassNames();
+
+interface CalendarWeekdayLabels {
+  long: (string | undefined)[];
+  short: (string | undefined)[];
+}
+
+const CalendarWeekdayLabelsContext = React.createContext<CalendarWeekdayLabels>(
+  { long: [], short: [] },
+);
+
+type DayPickerWeekdayProps = Parameters<
+  NonNullable<NonNullable<DayPickerProps["components"]>["Weekday"]>
+>[0];
+
+export const CalendarWeekdayRenderer = ({
+  className,
+  "aria-label": ariaLabel,
+  children,
+}: DayPickerWeekdayProps) => {
+  const weekdays = React.useContext(CalendarWeekdayLabelsContext);
+  const dayIndex = weekdayIndexes[ariaLabel as keyof typeof weekdayIndexes];
+
+  return (
+    <CalendarWeekday
+      className={className}
+      title={dayIndex !== undefined ? weekdays.long[dayIndex] : ariaLabel}
+    >
+      {dayIndex !== undefined ? weekdays.short[dayIndex] : children}
+    </CalendarWeekday>
+  );
+};
+
+export const mergeClassNames = (classNames: DayPickerProps["classNames"]) =>
+  Object.fromEntries(
+    Object.entries(classNames || {}).flatMap(([key, className]) => {
+      if (!className) return [];
+
+      const defaultClassName =
+        defaultClassNames[key as keyof typeof defaultClassNames];
+      return [
+        [
+          key,
+          defaultClassName ? `${defaultClassName} ${className}` : className,
+        ],
+      ];
+    }),
+  );
+
+interface CalendarProps {
+  dayPickerProps?: Omit<DayPickerProps, "mode" | "selected">;
+  focusedMonth?: Date;
+  selectedDays?: Date;
+  minDate?: string;
+  maxDate?: string;
+  weekStartsOn?: DayPickerProps["weekStartsOn"];
+  weekdaysLong: (string | undefined)[];
+  weekdaysShort: (string | undefined)[];
+  setFocusedMonth: (month: Date) => void;
+  onDayClick: (date?: Date, ev?: React.MouseEvent<Element, MouseEvent>) => void;
+}
+
+const Calendar = ({
+  dayPickerProps,
+  focusedMonth,
+  selectedDays,
+  minDate,
+  maxDate,
+  weekStartsOn,
+  weekdaysLong,
+  weekdaysShort,
+  setFocusedMonth,
+  onDayClick,
+}: CalendarProps) => {
+  const classNames = mergeClassNames(dayPickerProps?.classNames);
+
+  return (
+    <CalendarWeekdayLabelsContext.Provider
+      value={{ long: weekdaysLong, short: weekdaysShort }}
+    >
+      <DayPicker
+        hideNavigation
+        required={false}
+        weekStartsOn={weekStartsOn}
+        onMonthChange={setFocusedMonth}
+        disabled={getDisabledDays(minDate, maxDate)}
+        locale={{ localize: { ...defaultLocale.localize } }}
+        selected={selectedDays}
+        month={focusedMonth || /* istanbul ignore next */ new Date()}
+        onDayClick={(date, _, event) => onDayClick(date, event)}
+        fixedWeeks
+        defaultMonth={selectedDays}
+        {...dayPickerProps}
+        classNames={classNames}
+        components={{
+          ...dayPickerProps?.components,
+          DayButton: dayPickerProps?.components?.DayButton ?? CalendarDayButton,
+          Weekday:
+            dayPickerProps?.components?.Weekday ?? CalendarWeekdayRenderer,
+        }}
+        showOutsideDays
+        mode="single"
+      />
+    </CalendarWeekdayLabelsContext.Provider>
+  );
+};
+
+export default Calendar;
diff --git a/src/components/date/__internal__/calendar/calendar.test.tsx b/src/components/date/__internal__/calendar/calendar.test.tsx
new file mode 100644
index 0000000000..3105428bff
--- /dev/null
+++ b/src/components/date/__internal__/calendar/calendar.test.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { CalendarDay } from "react-day-picker";
+
+import { CalendarWeekdayRenderer, mergeClassNames } from "./calendar.component";
+import CalendarDayButton from "./calendar-day-button.component";
+import CalendarNavigation from "./calendar-navigation.component";
+
+const noop = () => {};
+const mockDay = new CalendarDay(new Date(2025, 0, 15), new Date(2025, 0, 1));
+
+test("renders a day without an accessible label", () => {
+  render(
+    <CalendarDayButton
+      day={mockDay}
+      modifiers={{ today: false }}
+      type="button"
+      aria-label={undefined}
+    >
+      15
+    </CalendarDayButton>,
+  );
+
+  expect(screen.getByRole("button", { name: "15" })).toBeVisible();
+});
+
+test("falls back to numeric month labels without a localizer", () => {
+  render(
+    <CalendarNavigation
+      displayedMonth={new Date(2025, 0, 1)}
+      monthSelectId="month"
+      yearSelectId="year"
+      years={[2025]}
+      onMonthChange={noop}
+      onYearChange={noop}
+    />,
+  );
+
+  expect(screen.getByRole("option", { name: "1" })).toBeVisible();
+  expect(screen.getByRole("option", { name: "12" })).toBeVisible();
+});
+
+test("preserves unknown weekday content", () => {
+  render(
+    <table>
+      <thead>
+        <tr>
+          <CalendarWeekdayRenderer
+            className="weekday"
+            aria-label="Unknown weekday"
+          >
+            Fallback content
+          </CalendarWeekdayRenderer>
+        </tr>
+      </thead>
+    </table>,
+  );
+
+  expect(screen.getByText("Fallback content")).toBeVisible();
+  expect(screen.getByText("Unknown weekday")).toBeInTheDocument();
+});
+
+test("preserves known and unknown custom class names", () => {
+  expect(
+    mergeClassNames({
+      root: "custom-root",
+      unknown: "custom-unknown",
+      day: "",
+    } as never),
+  ).toEqual({
+    root: "rdp-root custom-root",
+    unknown: "custom-unknown",
+  });
+});
diff --git a/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.component.tsx b/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.component.tsx
new file mode 100644
index 0000000000..49bfa90923
--- /dev/null
+++ b/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.component.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+
+import {
+  DatePickerTriggerButton,
+  DatePickerTriggerContainer,
+  DatePickerTriggerDivider,
+  DatePickerTriggerDividerWrapper,
+  LegacyDatePickerTrigger,
+  DatePickerTriggerDescription,
+} from "./date-picker-trigger.style";
+import Icon from "../../../icon";
+import useLocale from "../../../../hooks/__internal__/useLocale";
+import guid from "../../../../__internal__/utils/helpers/guid";
+
+interface DatePickerTriggerProps {
+  disabled?: boolean;
+  open?: boolean;
+  pickerId: string;
+  readOnly?: boolean;
+  size: "small" | "medium" | "large";
+  variant: "legacy" | "typical";
+  onClick: (ev: React.MouseEvent<HTMLElement>) => void;
+  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
+}
+
+const DatePickerTrigger = ({
+  disabled,
+  open,
+  pickerId,
+  readOnly,
+  size,
+  variant,
+  onClick,
+  onMouseDown,
+}: DatePickerTriggerProps) => {
+  const locale = useLocale();
+  const [triggerDescriptionId] = useState(
+    () => `date-picker-trigger-description-${guid()}`,
+  );
+
+  if (variant === "legacy") {
+    return (
+      <LegacyDatePickerTrigger
+        data-element="calendar"
+        data-role="input-icon-toggle"
+        aria-hidden="true"
+        $disabled={disabled}
+        $readOnly={readOnly}
+        $size={size}
+        onClick={onClick}
+        onMouseDown={onMouseDown}
+      >
+        <Icon type="calendar_today" />
+      </LegacyDatePickerTrigger>
+    );
+  }
+
+  return (
+    <DatePickerTriggerContainer onMouseDown={onMouseDown}>
+      <DatePickerTriggerDividerWrapper>
+        <DatePickerTriggerDivider
+          type="vertical"
+          p={0}
+          $disabled={disabled}
+          $readOnly={readOnly}
+        />
+      </DatePickerTriggerDividerWrapper>
+      <DatePickerTriggerButton
+        data-element="calendar"
+        data-role="input-icon-toggle"
+        onClick={onClick}
+        disabled={disabled || readOnly}
+        aria-label={locale.date.ariaLabels.openCalendarButton?.()}
+        aria-describedby={triggerDescriptionId}
+        aria-haspopup="dialog"
+        aria-controls={open ? pickerId : undefined}
+        aria-expanded={open}
+        $size={size}
+        $readOnly={readOnly}
+        size={size}
+        variant="default"
+        variantType="subtle"
+        iconType="calendar_today"
+        m={0}
+      />
+      <DatePickerTriggerDescription id={triggerDescriptionId}>
+        {locale.date.ariaLabels.openCalendarDescription?.()}
+      </DatePickerTriggerDescription>
+    </DatePickerTriggerContainer>
+  );
+};
+
+export default DatePickerTrigger;
diff --git a/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.style.ts b/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.style.ts
new file mode 100644
index 0000000000..3721c2614b
--- /dev/null
+++ b/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.style.ts
@@ -0,0 +1,172 @@
+import styled, { css } from "styled-components";
+import Button from "../../../button/__next__";
+import Divider from "../../../divider";
+import StyledIcon from "../../../icon/icon.style";
+import { propsForSize as buttonSizeConfig } from "../../../button/__next__/button.config";
+import addFocusStyling from "../../../../style/utils/add-focus-styling";
+import type { DatePickerSize } from "../date-picker";
+import legacyInputSizes from "../../../../__internal__/legacy-input/input-sizes.style";
+import visuallyHidden from "../../../../style/utils/visually-hidden";
+
+const DatePickerTriggerContainer = styled.span`
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+`;
+
+interface LegacyDatePickerTriggerProps {
+  $disabled?: boolean;
+  $readOnly?: boolean;
+  $size: DatePickerSize;
+}
+
+const LegacyDatePickerTrigger = styled.span<LegacyDatePickerTriggerProps>`
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  justify-content: center;
+  width: ${({ $size }) => legacyInputSizes[$size].height};
+  cursor: ${({ $disabled, $readOnly }) => {
+    if ($disabled) return "not-allowed";
+    if ($readOnly) return "default";
+    return "pointer";
+  }};
+
+  ${({ $disabled, $readOnly }) => {
+    let iconColor = "var(--input-typical-icon-default)";
+
+    if ($readOnly) {
+      iconColor = "var(--input-typical-icon-read-only)";
+    } else if ($disabled) {
+      iconColor = "var(--button-typical-subtle-label-disabled)";
+    }
+
+    return css`
+      ${StyledIcon} {
+        color: ${iconColor};
+      }
+    `;
+  }}
+`;
+
+const DatePickerTriggerDividerWrapper = styled.span`
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+`;
+
+interface DatePickerTriggerDividerProps {
+  $disabled?: boolean;
+  $readOnly?: boolean;
+}
+
+const DatePickerTriggerDivider = styled(Divider)<DatePickerTriggerDividerProps>`
+  && {
+    align-self: stretch;
+    box-sizing: border-box;
+    display: inline-flex;
+    height: 100%;
+    padding-inline: 0;
+    margin: 0;
+    padding-block: var(--global-space-comp-s);
+  }
+
+  ${({ $disabled, $readOnly }) => {
+    let borderColor = "var(--input-typical-border-default)";
+
+    if ($disabled) {
+      borderColor = "var(--input-typical-border-disabled)";
+    } else if ($readOnly) {
+      borderColor = "var(--input-typical-border-read-only)";
+    }
+
+    return css`
+      && [data-role="divider-content"] {
+        border-inline-start-color: ${borderColor};
+        opacity: 1;
+      }
+    `;
+  }}
+`;
+
+interface DatePickerTriggerButtonProps {
+  $size: DatePickerSize;
+  $readOnly?: boolean;
+}
+
+const DatePickerTriggerButton = styled(Button)<DatePickerTriggerButtonProps>`
+  ${({ disabled, $readOnly }) => {
+    let iconColor = "var(--input-typical-icon-default)";
+
+    if ($readOnly) {
+      iconColor = "var(--input-typical-icon-read-only)";
+    } else if (disabled) {
+      iconColor = "var(--button-typical-subtle-label-disabled)";
+    }
+
+    return css`
+      color: ${iconColor};
+
+      && ${StyledIcon} {
+        color: ${iconColor};
+      }
+    `;
+  }}
+
+  && {
+    --date-picker-trigger-size: calc(
+      ${({ $size }) => buttonSizeConfig[$size].height} -
+        (2 * var(--global-borderwidth-xs))
+    );
+
+    width: var(--date-picker-trigger-size);
+    min-width: var(--date-picker-trigger-size);
+    height: var(--date-picker-trigger-size);
+    min-height: var(--date-picker-trigger-size);
+    padding: var(--global-space-none);
+    border-radius: var(--global-radius-none);
+    border: none;
+  }
+
+  &&[aria-expanded="true"]:not(:disabled) {
+    background-color: var(--button-typical-subtle-bg-active);
+    color: var(--button-typical-subtle-label-active);
+
+    ${StyledIcon} {
+      color: var(--button-typical-subtle-label-active);
+    }
+  }
+
+  &&:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &&:hover {
+    border-radius: var(--global-radius-none) var(--global-radius-action-m)
+      var(--global-radius-action-m) var(--global-radius-none);
+  }
+
+  &&:focus-visible {
+    border-radius: var(--global-radius-none) var(--global-radius-action-m)
+      var(--global-radius-action-m) var(--global-radius-none);
+    ${addFocusStyling()}
+    z-index: 2;
+  }
+
+  &&:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+const DatePickerTriggerDescription = styled.span`
+  ${visuallyHidden}
+`;
+
+export {
+  DatePickerTriggerContainer,
+  DatePickerTriggerDividerWrapper,
+  DatePickerTriggerDivider,
+  DatePickerTriggerButton,
+  LegacyDatePickerTrigger,
+  DatePickerTriggerDescription,
+};
diff --git a/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.test.tsx b/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.test.tsx
new file mode 100644
index 0000000000..e822c6b4b3
--- /dev/null
+++ b/src/components/date/__internal__/date-picker-trigger/date-picker-trigger.test.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { enGB as enGBDateLocale } from "date-fns/locale/en-GB";
+
+import I18nProvider from "../../../i18n-provider";
+import DatePickerTrigger from "./date-picker-trigger.component";
+
+const defaultProps = {
+  pickerId: "test-picker",
+  size: "medium" as const,
+  onClick: () => {},
+};
+
+describe("typical variant", () => {
+  test("renders a visually hidden span in the DOM", () => {
+    render(<DatePickerTrigger {...defaultProps} variant="typical" />);
+
+    const span = screen.getByText("Instructions on how to use", {
+      selector: "span",
+    });
+
+    expect(span).toBeInTheDocument();
+  });
+
+  test("aria-describedby on button matches hidden span id", () => {
+    render(<DatePickerTrigger {...defaultProps} variant="typical" />);
+
+    const button = screen.getByRole("button", { name: "Open calendar" });
+    const span = screen.getByText("Instructions on how to use", {
+      selector: "span",
+    });
+
+    const descId = button.getAttribute("aria-describedby");
+    expect(descId).toBeTruthy();
+
+    expect(span).toHaveAttribute("id", descId);
+  });
+
+  test("hidden span text matches locale openCalendarDescription", () => {
+    render(<DatePickerTrigger {...defaultProps} variant="typical" />);
+
+    const span = screen.getByText("Instructions on how to use", {
+      selector: "span",
+    });
+
+    expect(span).toHaveTextContent("Instructions on how to use");
+  });
+
+  test("hidden span text uses locale override when provided", () => {
+    render(
+      <I18nProvider
+        locale={{
+          date: {
+            dateFnsLocale: () => enGBDateLocale,
+            ariaLabels: {
+              previousMonthButton: () => "Previous month",
+              nextMonthButton: () => "Next month",
+              openCalendarDescription: () => "Custom instructions",
+            },
+          },
+        }}
+      >
+        <DatePickerTrigger {...defaultProps} variant="typical" />
+      </I18nProvider>,
+    );
+
+    const span = screen.getByText("Custom instructions", {
+      selector: "span",
+    });
+
+    expect(span).toHaveTextContent("Custom instructions");
+  });
+
+  test("hidden span is not hidden with display:none or visibility:hidden", () => {
+    render(<DatePickerTrigger {...defaultProps} variant="typical" />);
+
+    const span = screen.getByText("Instructions on how to use", {
+      selector: "span",
+    });
+
+    expect(span).not.toHaveStyle("display: none");
+    expect(span).not.toHaveStyle("visibility: hidden");
+  });
+
+  test("stable ID — does not change on re-render", () => {
+    const { rerender } = render(
+      <DatePickerTrigger {...defaultProps} variant="typical" />,
+    );
+
+    const button = screen.getByRole("button", { name: "Open calendar" });
+    const span = screen.getByText("Instructions on how to use", {
+      selector: "span",
+    });
+
+    const idBefore = button.getAttribute("aria-describedby");
+
+    rerender(<DatePickerTrigger {...defaultProps} variant="typical" open />);
+
+    expect(button.getAttribute("aria-describedby")).toBe(idBefore);
+    expect(span).toHaveAttribute("id", idBefore);
+  });
+});
+
+describe("legacy variant", () => {
+  test("does not render a hidden instructions span", () => {
+    render(<DatePickerTrigger {...defaultProps} variant="legacy" />);
+
+    // No button element — legacy trigger is aria-hidden
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    // No instructions text
+    expect(
+      screen.queryByText("Instructions on how to use"),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/date/__internal__/date-picker/date-picker-guard.test.tsx b/src/components/date/__internal__/date-picker/date-picker-guard.test.tsx
new file mode 100644
index 0000000000..f5162fa2e8
--- /dev/null
+++ b/src/components/date/__internal__/date-picker/date-picker-guard.test.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import DatePicker from "./date-picker.component";
+
+jest.mock("../calendar/calendar.component", () => ({
+  __esModule: true,
+  default: ({ onDayClick }: { onDayClick: (date?: Date) => void }) => (
+    <button type="button" onClick={() => onDayClick(undefined)}>
+      Day without a date
+    </button>
+  ),
+}));
+
+test("ignores a day click when the calendar supplies no date", async () => {
+  const user = userEvent.setup();
+  const onRequestPickerClose = jest.fn();
+  const inputContainerRef = {
+    current: document.createElement("div"),
+  } as React.RefObject<HTMLDivElement>;
+
+  render(
+    <DatePicker
+      inputContainerRef={inputContainerRef}
+      onRequestPickerClose={onRequestPickerClose}
+      open
+      disablePortal
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Day without a date" }));
+
+  expect(onRequestPickerClose).not.toHaveBeenCalled();
+});
diff --git a/src/components/date/__internal__/date-picker/date-picker.component.tsx b/src/components/date/__internal__/date-picker/date-picker.component.tsx
index e8a98fa406..8be37fa0ae 100644
--- a/src/components/date/__internal__/date-picker/date-picker.component.tsx
+++ b/src/components/date/__internal__/date-picker/date-picker.component.tsx
@@ -1,103 +1,46 @@
 import { flip, offset } from "@floating-ui/dom";
-import type { Day, Month } from "date-fns";
-import React, {
-  useCallback,
-  KeyboardEvent,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useContext,
-  RefObject,
-} from "react";
-import {
-  DayPicker,
-  DayPickerProps,
-  defaultLocale,
-  Modifiers,
-} from "react-day-picker";
+import React, { useCallback, useRef, useState } from "react";
 
-import useLocale from "../../../../hooks/__internal__/useLocale";
 import Popover from "../../../../__internal__/popover";
-import Navbar from "../navbar";
-import Weekday from "../weekday";
-import { getDisabledDays } from "../utils";
-import { defaultFocusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
-import Events from "../../../../__internal__/utils/helpers/events";
-import FlatTableContext from "../../../flat-table/__internal__/flat-table.context";
+import guid from "../../../../__internal__/utils/helpers/guid";
 import Logger from "../../../../__internal__/utils/logger";
-
-import StyledDayPicker from "./day-picker.style";
-
-export interface PickerProps
-  extends Omit<DayPickerProps, "mode" | "modifiers"> {
-  modifiers?: Partial<Modifiers>;
-}
-
-export interface DatePickerProps {
-  /**
-   * [Legacy] Boolean to toggle where DatePicker is rendered in relation to the Date Input
-   * @deprecated
-   */
-  disablePortal?: boolean;
-  /** Minimum possible date YYYY-MM-DD */
-  minDate?: string;
-  /** Maximum possible date YYYY-MM-DD */
-  maxDate?: string;
-  /**
-   * Pass any props that match the DayPickerProps interface to override default behaviors
-   * See [DayPickerProps](https://daypicker.dev/api/type-aliases/DayPickerProps) for a full list of available props
-   * */
-  pickerProps?: PickerProps;
-  /** Element that the DatePicker will be displayed under */
-  inputElement: RefObject<HTMLElement>;
-  /** Currently selected date */
-  selectedDays?: Date | undefined;
-  /** Callback to handle mousedown event on picker container */
-  pickerMouseDown?: () => void;
-  /** Sets whether the picker should be displayed */
-  open?: boolean;
-  /** Callback triggered when a Day is clicked */
-  onDayClick?: (date: Date, ev: React.MouseEvent<HTMLDivElement>) => void;
-  /** Sets the picker open state */
-  setOpen: (isOpen: boolean) => void;
-  /** Id passed to tab guard element */
-  pickerTabGuardId?: string;
-  /** Callback triggered when the picker is closed */
-  onPickerClose?: () => void;
-  /** Prop to specify the aria-label attribute of the date picker */
-  ariaLabel?: string;
-  /** Prop to specify the aria-labelledby attribute of the date picker */
-  ariaLabelledBy?: string;
-}
-
-const popoverMiddleware = [
+import StyledDatePickerDialog from "./date-picker.style";
+import Calendar from "../calendar/calendar.component";
+import CalendarCloseButton from "../calendar/calendar-close-button.component";
+import CalendarNavigation from "../calendar/calendar-navigation.component";
+import type { DatePickerProps } from "./date-picker.types";
+import useDatePickerFocus from "../hooks/useDatePickerFocus";
+import useDatePickerInFlatTable from "../hooks/useDatePickerInFlatTable";
+import useDatePickerKeyboardNavigation from "../hooks/useDatePickerKeyboardNavigation";
+import useDatePickerLocale from "../hooks/useDatePickerLocale";
+import useDatePickerMonthSync from "../hooks/useDatePickerMonthSync";
+import useDatePickerMonthYearSelection from "../hooks/useDatePickerMonthYearSelection";
+
+const pickerPopoverMiddleware = [
   offset(3),
   flip({
-    fallbackStrategy: "initialPlacement",
+    fallbackPlacements: ["bottom-end", "top-start", "top-end"],
   }),
 ];
 
-const Nav = Navbar;
 let deprecateDisablePortalWarnTriggered = false;
 
 export const DatePicker = ({
-  inputElement,
+  inputContainerRef,
   minDate,
   maxDate,
-  selectedDays,
+  selectedDate,
   disablePortal = true,
   onDayClick,
-  pickerMouseDown,
-  pickerProps,
+  onPickerMouseDown,
+  dayPickerProps,
   open,
-  setOpen,
+  onRequestPickerClose,
   pickerTabGuardId,
-  onPickerClose,
-  ariaLabel: datePickerAriaLabel,
-  ariaLabelledBy: datePickerAriaLabelledBy,
+  pickerId,
+  yearRangeOffset,
 }: DatePickerProps) => {
-  if (!deprecateDisablePortalWarnTriggered && !!disablePortal) {
+  if (!deprecateDisablePortalWarnTriggered && disablePortal) {
     deprecateDisablePortalWarnTriggered = true;
     Logger.deprecate(
       "`disablePortal` is deprecated in DateInput and DateRange, and support will soon be removed.",
@@ -105,218 +48,141 @@ export const DatePicker = ({
   }
 
   const [focusedMonth, setFocusedMonth] = useState<Date | undefined>(
-    selectedDays || new Date(),
-  );
-  const locale = useLocale();
-  const { localize, options } = locale.date.dateFnsLocale();
-  const { weekStartsOn } = options || /* istanbul ignore next */ {};
-  const weekdaysLong = useMemo(
-    () => Array.from({ length: 7 }).map((_, i) => localize?.day(i as Day)),
-    [localize],
+    selectedDate || new Date(),
   );
-  const weekdaysShort = useMemo(() => {
-    const isGivenLocale = (str: string) => locale.locale().includes(str);
-    return Array.from({ length: 7 }).map((_, i) =>
-      localize
-        ?.day(
-          i as Day,
-          ["de", "pl"].some(isGivenLocale)
-            ? { width: "wide" }
-            : { width: "abbreviated" },
-        )
-        .substring(0, isGivenLocale("de") ? 2 : 3),
-    );
-  }, [locale, localize]);
-  const ref = useRef<HTMLDivElement>(null);
+  const {
+    datePickerDialogAriaLabel,
+    closeButtonLabel,
+    localize,
+    weekStartsOn,
+    weekdaysLong,
+    weekdaysShort,
+  } = useDatePickerLocale();
+
+  const pickerRef = useRef<HTMLDivElement>(null);
+  const [{ monthSelectId, yearSelectId }] = useState(() => ({
+    monthSelectId: `date-picker-month-${guid()}`,
+    yearSelectId: `date-picker-year-${guid()}`,
+  }));
+
+  const closePickerAndRestoreFocus = useCallback(() => {
+    inputContainerRef.current?.querySelector("input")?.focus();
+    onRequestPickerClose();
+  }, [inputContainerRef, onRequestPickerClose]);
 
   const handleDayClick = (
     date?: Date,
-    e?: React.MouseEvent<Element, MouseEvent>,
+    event?: React.MouseEvent<Element, MouseEvent>,
   ) => {
-    /* istanbul ignore else */
-    if (date) onDayClick?.(date, e as React.MouseEvent<HTMLDivElement>);
-    onPickerClose?.();
+    if (!date) return;
+    onDayClick?.(date, event as React.MouseEvent<HTMLDivElement>);
+    onRequestPickerClose();
   };
 
-  const handleKeyUp = useCallback(
-    (ev: KeyboardEvent) => {
-      /* istanbul ignore else */
-      if (open && Events.isEscKey(ev)) {
-        setFocusedMonth(selectedDays);
-        inputElement.current?.querySelector("input")?.focus();
-        setOpen(false);
-        onPickerClose?.();
-        ev.stopPropagation();
-      }
-    },
-    [inputElement, onPickerClose, open, selectedDays, setOpen],
-  );
-
-  const handleOnKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
-    /* istanbul ignore else */
-    if (
-      ref.current?.querySelector(".rdp-nav button") ===
-        document.activeElement &&
-      Events.isTabKey(ev) &&
-      Events.isShiftKey(ev)
-    ) {
-      ev.preventDefault();
-      setOpen(false);
-      onPickerClose?.();
-      inputElement.current?.querySelector("input")?.focus();
-    }
-  };
-
-  const handleOnDayKeyDown = (
-    _day: Date,
-    _modifiers: Modifiers,
-    ev: React.KeyboardEvent<HTMLDivElement>,
-  ) => {
-    // timeout added to prevent this handler from interfering with the useFocusPortalContent hook, when the date-range
-    // is used inside of a popover-container and it is the last focusable element of the popover-container
-    setTimeout(() => {
-      // we need to manually handle this as the picker may be in a Portal
-      /* istanbul ignore else */
-      if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
-        ev.preventDefault();
-        setOpen(false);
-        onPickerClose?.();
-        const input = inputElement.current?.querySelector("input");
-
-        /* istanbul ignore else */
-        if (input) {
-          const elements = Array.from(
-            document.querySelectorAll(defaultFocusableSelectors) ||
-              /* istanbul ignore next */ [],
-          ) as HTMLElement[];
-          const elementsInPicker = Array.from(
-            ref.current?.querySelectorAll("button, [tabindex]") ||
-              /* istanbul ignore next */ [],
-          ) as HTMLElement[];
-          const filteredElements = elements.filter(
-            (el) =>
-              Number(el.tabIndex) !== -1 && !elementsInPicker.includes(el),
-          );
-          const nextIndex = filteredElements.indexOf(input as HTMLElement) + 1;
-          filteredElements[nextIndex]?.focus();
-        }
-      }
-    }, 0);
-  };
-
-  const { isInFlatTable, setHasOpenDatePicker } = useContext(FlatTableContext);
-
-  useEffect(() => {
-    setHasOpenDatePicker?.(!!open);
-  }, [open, setHasOpenDatePicker]);
-
-  useEffect(() => {
-    if (selectedDays) {
-      setFocusedMonth(selectedDays);
-    }
-  }, [selectedDays]);
-
-  useEffect(() => {
-    if (!open && selectedDays) {
-      const fMonth = focusedMonth?.getMonth();
-      const sMonth = selectedDays?.getMonth();
-      if (fMonth !== sMonth) setFocusedMonth(selectedDays);
-    }
-  }, [focusedMonth, open, selectedDays]);
-
-  if (!open) {
-    return null;
-  }
+  const handleEscape = useCallback(() => {
+    setFocusedMonth(selectedDate);
+    closePickerAndRestoreFocus();
+  }, [closePickerAndRestoreFocus, selectedDate]);
+  const {
+    getPickerDayFocusTarget,
+    handleBlur,
+    handleKeyDown,
+    handleKeyUp,
+    markSelectorChanged,
+    resetChangedSelector,
+  } = useDatePickerKeyboardNavigation({
+    ref: pickerRef,
+    open,
+    monthSelectId,
+    yearSelectId,
+    onEscape: handleEscape,
+  });
+  const { displayedMonth, years, handleMonthChange, handleYearChange } =
+    useDatePickerMonthYearSelection({
+      minDate,
+      maxDate,
+      dayPickerProps,
+      focusedMonth,
+      setFocusedMonth,
+      markSelectorChanged,
+      yearRangeOffset,
+    });
+  useDatePickerMonthSync({
+    open,
+    selectedDate,
+    focusedMonth,
+    setFocusedMonth,
+  });
+  useDatePickerFocus({
+    open,
+    getPickerDayFocusTarget,
+    resetChangedSelector,
+  });
+  const { isInFlatTable } = useDatePickerInFlatTable(open);
+
+  if (!open) return null;
 
   const handleTabGuardFocus = () => {
-    ref.current?.querySelector("button")?.focus();
+    getPickerDayFocusTarget()?.focus();
   };
 
   return (
-    <>
-      <Popover
-        placement="bottom-start"
-        reference={inputElement}
-        middleware={popoverMiddleware}
-        disablePortal={disablePortal}
-        disableBackgroundUI={isInFlatTable}
-        popoverStrategy="fixed"
+    <Popover
+      placement="bottom-start"
+      reference={inputContainerRef}
+      middleware={pickerPopoverMiddleware}
+      disablePortal={disablePortal}
+      disableBackgroundUI={isInFlatTable}
+      popoverStrategy="fixed"
+    >
+      <StyledDatePickerDialog
+        id={pickerId || "styled-day-picker"}
+        data-role="date-picker"
+        ref={pickerRef}
+        onMouseDown={onPickerMouseDown}
+        onBlur={handleBlur}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        role="dialog"
+        aria-label={datePickerDialogAriaLabel}
       >
-        <StyledDayPicker
-          id="styled-day-picker"
-          data-role="date-picker"
-          ref={ref}
-          onMouseDown={pickerMouseDown}
-          onKeyUp={handleKeyUp}
-          onKeyDown={handleOnKeyDown}
-          role="region"
-          aria-label={datePickerAriaLabel}
-          aria-labelledby={datePickerAriaLabelledBy}
-        >
+        {/* When portaled, redirects Tab focus from the input into the calendar. */}
+        {!disablePortal && (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
           <div
             id={pickerTabGuardId}
+            data-role="date-picker-tab-guard"
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
             onFocus={handleTabGuardFocus}
           />
-          <DayPicker
-            formatters={{
-              formatCaption: (month) =>
-                `${localize?.month(month.getMonth() as Month)} ${month.getFullYear()}`,
-            }}
-            required={false}
-            weekStartsOn={weekStartsOn}
-            onMonthChange={setFocusedMonth}
-            disabled={getDisabledDays(minDate, maxDate)}
-            locale={{
-              localize: {
-                ...defaultLocale.localize,
-              },
-            }}
-            selected={selectedDays}
-            month={focusedMonth || /* istanbul ignore next */ new Date()}
-            onDayClick={(d, _, e) => {
-              const date = d as Date;
-              handleDayClick(date, e);
-            }}
-            components={{
-              Nav,
-              Weekday: (props) => {
-                const fixedDays = {
-                  Sunday: 0,
-                  Monday: 1,
-                  Tuesday: 2,
-                  Wednesday: 3,
-                  Thursday: 4,
-                  Friday: 5,
-                  Saturday: 6,
-                };
-                const { className, "aria-label": ariaLabel } = props;
-                const dayIndex = fixedDays[ariaLabel as keyof typeof fixedDays];
-
-                return (
-                  <Weekday className={className} title={weekdaysLong[dayIndex]}>
-                    {weekdaysShort[dayIndex]}
-                  </Weekday>
-                );
-              },
-            }}
-            fixedWeeks
-            defaultMonth={selectedDays || undefined}
-            onDayKeyDown={(date, modifiers, e) => {
-              handleOnDayKeyDown(
-                date,
-                modifiers,
-                e as React.KeyboardEvent<HTMLDivElement>,
-              );
-            }}
-            {...pickerProps}
-            showOutsideDays
-            mode="single"
-          />
-        </StyledDayPicker>
-      </Popover>
-    </>
+        )}
+        <CalendarNavigation
+          displayedMonth={displayedMonth}
+          monthSelectId={monthSelectId}
+          yearSelectId={yearSelectId}
+          years={years}
+          localize={localize}
+          onMonthChange={handleMonthChange}
+          onYearChange={handleYearChange}
+        />
+        <Calendar
+          dayPickerProps={dayPickerProps}
+          focusedMonth={displayedMonth}
+          selectedDays={selectedDate}
+          minDate={minDate}
+          maxDate={maxDate}
+          weekStartsOn={weekStartsOn}
+          weekdaysLong={weekdaysLong}
+          weekdaysShort={weekdaysShort}
+          setFocusedMonth={setFocusedMonth}
+          onDayClick={handleDayClick}
+        />
+        <CalendarCloseButton onClick={closePickerAndRestoreFocus}>
+          {closeButtonLabel}
+        </CalendarCloseButton>
+      </StyledDatePickerDialog>
+    </Popover>
   );
 };
 
diff --git a/src/components/date/__internal__/date-picker/date-picker.style.ts b/src/components/date/__internal__/date-picker/date-picker.style.ts
new file mode 100644
index 0000000000..6d999f0c05
--- /dev/null
+++ b/src/components/date/__internal__/date-picker/date-picker.style.ts
@@ -0,0 +1,295 @@
+import styled from "styled-components";
+
+import applyBaseTheme from "../../../../style/themes/apply-base-theme";
+import addFocusStyling from "../../../../style/utils/add-focus-styling";
+
+const DatePickerPopover = styled.div.attrs(applyBaseTheme)`
+  --date-picker-day-cell-size: var(--global-size-m);
+  --date-picker-grid-width: calc(7 * var(--date-picker-day-cell-size));
+  --date-picker-day-button-size: calc(
+    var(--date-picker-day-cell-size) - 2 * var(--global-borderwidth-s)
+  );
+  --date-picker-popover-width: 320px;
+  --date-picker-popover-min-width: 288px;
+
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2000;
+  width: var(--date-picker-popover-width);
+  min-width: var(--date-picker-popover-min-width);
+  max-width: var(--date-picker-popover-width);
+  padding: var(--global-space-layout-2-xs);
+  background: var(--popover-bg-default);
+  box-shadow: var(--global-depth-lvl1);
+  border-radius: var(--global-radius-action-m);
+
+  .rdp-root,
+  .rdp-root * {
+    box-sizing: border-box;
+  }
+
+  .rdp-root {
+    width: 100%;
+    padding: var(--global-space-none);
+    background: transparent;
+    box-shadow: none;
+    border-radius: var(--global-radius-none);
+    text-align: center;
+    font: var(--global-font-static-body-medium-m);
+    color: var(--input-calendar-txt-default);
+  }
+
+  .rdp-months {
+    display: block;
+    width: 100%;
+    max-width: none;
+    padding: var(--global-space-none);
+  }
+
+  .rdp-month {
+    width: 100%;
+    margin: 0;
+  }
+
+  .rdp-month_caption {
+    display: none;
+  }
+
+  .rdp-month_grid,
+  .rdp-weeks,
+  .rdp-weekdays,
+  .rdp-week {
+    width: var(--date-picker-grid-width);
+    max-width: 100%;
+  }
+
+  .rdp-month_grid {
+    margin: 0 auto;
+  }
+
+  .rdp-weeks {
+    display: flex;
+    flex-direction: column;
+    gap: var(--global-space-comp-s);
+    margin-top: 0;
+  }
+
+  .rdp-weekday {
+    opacity: 1;
+    color: var(--input-calendar-txt-alt);
+    text-transform: none;
+  }
+
+  .rdp-weekdays {
+    display: flex;
+    height: var(--date-picker-day-cell-size);
+  }
+
+  .rdp-week {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--date-picker-day-cell-size);
+  }
+
+  .rdp-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--date-picker-day-cell-size);
+    height: var(--date-picker-day-cell-size);
+    padding: var(--global-space-none);
+    color: var(--input-calendar-txt-default);
+    border-radius: var(--global-radius-action-circle);
+  }
+
+  .rdp-day_button {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--date-picker-day-button-size);
+    min-width: var(--date-picker-day-button-size);
+    height: var(--date-picker-day-button-size);
+    margin: 0;
+    border: none;
+    border-radius: var(--global-radius-action-circle);
+    background: transparent;
+    font: var(--global-font-static-body-medium-m);
+    color: inherit;
+    text-align: center;
+    cursor: pointer;
+    /* rotate(0deg) creates a stacking context so z-index works on the :focus-visible ring */
+    transform: rotate(0deg);
+
+    &:focus-visible {
+      ${addFocusStyling()}
+      border-radius: var(--global-radius-action-circle);
+    }
+  }
+
+  .rdp-selected:not(.rdp-outside),
+  .rdp-today:not(.rdp-outside) {
+    background: transparent;
+    border-radius: var(--global-radius-action-circle);
+    color: inherit;
+    font-weight: inherit;
+  }
+
+  .rdp-day:not(.rdp-selected):not(.rdp-disabled):not(.rdp-outside):hover
+    .rdp-day_button:not(:disabled) {
+    background: var(--input-calendar-bg-hover);
+    color: var(--input-calendar-txt-hover);
+  }
+
+  .rdp-selected .rdp-day_button {
+    z-index: 2;
+    background: var(--input-calendar-bg-active);
+    color: var(--input-calendar-txt-active);
+    border-radius: var(--global-radius-action-circle);
+  }
+
+  .rdp-selected {
+    z-index: 1;
+  }
+
+  .rdp-range_start {
+    position: relative;
+    background: transparent;
+    color: var(--input-calendar-txt-duration);
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 0;
+      inset: 0;
+      background: var(--input-calendar-bg-duration);
+      border-color: var(--input-calendar-border-duration);
+      border-style: solid;
+      border-width: var(--global-borderwidth-s) 0 var(--global-borderwidth-s)
+        var(--global-borderwidth-s);
+      border-radius: var(--global-radius-action-circle) 0 0
+        var(--global-radius-action-circle);
+      pointer-events: none;
+    }
+  }
+
+  .rdp-range_middle,
+  .rdp-range_middle.rdp-today {
+    background: var(--input-calendar-bg-duration);
+    border-radius: var(--global-radius-none);
+    border-block: var(--global-borderwidth-s) solid
+      var(--input-calendar-border-duration);
+    color: var(--input-calendar-txt-duration);
+
+    &.rdp-outside {
+      color: var(--input-calendar-txt-duration);
+    }
+  }
+
+  .rdp-range_end {
+    position: relative;
+    background: transparent;
+    color: var(--input-calendar-txt-duration);
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 0;
+      inset: 0;
+      background: var(--input-calendar-bg-duration);
+      border-color: var(--input-calendar-border-duration);
+      border-style: solid;
+      border-width: var(--global-borderwidth-s) var(--global-borderwidth-s)
+        var(--global-borderwidth-s) var(--global-borderwidth-none);
+      border-radius: var(--global-radius-none)
+        var(--global-radius-action-circle) var(--global-radius-action-circle)
+        var(--global-radius-none);
+      pointer-events: none;
+    }
+  }
+
+  .rdp-range_start .rdp-day_button,
+  .rdp-range_end .rdp-day_button {
+    z-index: 2;
+    background: var(--input-calendar-bg-active);
+    color: var(--input-calendar-txt-active);
+  }
+
+  .rdp-range_start:not(.rdp-disabled):hover .rdp-day_button,
+  .rdp-range_middle:not(.rdp-disabled):hover .rdp-day_button,
+  .rdp-range_end:not(.rdp-disabled):hover .rdp-day_button {
+    background: var(--input-calendar-bg-hover);
+    color: var(--input-calendar-txt-hover);
+  }
+
+  .rdp-range_start.rdp-range_end {
+    background: transparent;
+    border-radius: var(--global-radius-action-circle);
+
+    &::before {
+      content: "";
+      border: var(--global-borderwidth-s) solid
+        var(--input-calendar-border-duration);
+      border-radius: var(--global-radius-action-circle);
+    }
+  }
+
+  .rdp-disabled {
+    color: var(--input-calendar-txt-disabled);
+  }
+
+  .rdp-disabled .rdp-day_button,
+  .rdp-day_button:disabled {
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--input-calendar-txt-disabled);
+  }
+
+  .rdp-outside {
+    color: var(--input-calendar-txt-alt);
+  }
+
+  .rdp-today:not(.rdp-selected):not(.rdp-range_start):not(
+      .rdp-range_middle
+    ):not(.rdp-range_end)
+    .rdp-day_button {
+    background: transparent;
+  }
+
+  .rdp-focused:not(.rdp-disabled):not(.rdp-outside) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  [data-role="date-picker-today-indicator"] {
+    position: absolute;
+    z-index: 2;
+    left: 50%;
+    bottom: var(--global-space-comp-s);
+    transform: translateX(-50%);
+    width: var(--global-size-3-xs);
+    height: var(--global-size-5-xs);
+    background: var(--input-calendar-txt-default);
+    border-radius: var(--global-radius-action-circle);
+    pointer-events: none;
+  }
+
+  .rdp-selected [data-role="date-picker-today-indicator"] {
+    background: var(--input-calendar-bg-hover);
+  }
+
+  .rdp-outside [data-role="date-picker-today-indicator"] {
+    background: var(--input-calendar-bg-duration);
+  }
+
+  .rdp-disabled [data-role="date-picker-today-indicator"] {
+    background: var(--input-calendar-bg-disabled);
+  }
+`;
+
+export default DatePickerPopover;
diff --git a/src/components/date/__internal__/date-picker/date-picker.test.tsx b/src/components/date/__internal__/date-picker/date-picker.test.tsx
index 23ae4062a4..4838eba635 100644
--- a/src/components/date/__internal__/date-picker/date-picker.test.tsx
+++ b/src/components/date/__internal__/date-picker/date-picker.test.tsx
@@ -1,62 +1,37 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import type { Day } from "date-fns";
-import { de as deLocale } from "date-fns/locale/de";
-import { enCA as enCALocale } from "date-fns/locale/en-CA";
-import { enGB as enGBLocale } from "date-fns/locale/en-GB";
-import { enUS as enUSLocale } from "date-fns/locale/en-US";
-import { enZA as enZALocale } from "date-fns/locale/en-ZA";
-import { es as esLocale } from "date-fns/locale/es";
-import { fr as frLocale } from "date-fns/locale/fr";
-import { frCA as frCALocale } from "date-fns/locale/fr-CA";
-import { zhCN as zhCNLocale } from "date-fns/locale/zh-CN";
-import type { Locale } from "react-day-picker";
 
 import Logger from "../../../../__internal__/utils/logger";
+import deDE from "../../../../locales/de-de";
 import I18nProvider from "../../../i18n-provider";
-import DatePicker, { DatePickerProps } from "./date-picker.component";
+import DatePicker from "./date-picker.component";
+import type { DatePickerProps } from "./date-picker.types";
 
-interface MockProps extends Omit<DatePickerProps, "inputElement"> {
-  open?: boolean;
-}
-
-const DatePickerWithInput = (props: MockProps) => {
+const DatePickerWithInput = (
+  props: Omit<DatePickerProps, "inputContainerRef">,
+) => {
   const ref = React.useRef<HTMLDivElement>(null);
-  const Input = () => (
-    <div ref={ref}>
-      <input title="foobar" name="foo" id="bar" />
-    </div>
-  );
+
   return (
     <>
-      <Input />
-      <DatePicker {...props} inputElement={ref} />
+      <div ref={ref}>
+        <input aria-label="Date" />
+      </div>
+      <DatePicker {...props} inputContainerRef={ref} />
     </>
   );
 };
 
-const getWeekdayTranslations = (
-  index: number,
-  locale: Locale,
-  substringLimit = 3,
-) => {
-  const startDay = locale.options?.weekStartsOn || 0;
-
-  return locale.localize
-    ?.day(((index + startDay) % 7) as Day, { width: "abbreviated" })
-    .substring(0, substringLimit);
-};
-
-test("logs a deprecation warning when disablePortal is used", async () => {
+test("logs the disablePortal deprecation warning once", () => {
   const loggerSpy = jest
     .spyOn(Logger, "deprecate")
     .mockImplementation(() => {});
 
   render(
     <>
-      <DatePickerWithInput setOpen={() => {}} open disablePortal />
-      <DatePickerWithInput setOpen={() => {}} open disablePortal />
+      <DatePickerWithInput onRequestPickerClose={() => {}} open disablePortal />
+      <DatePickerWithInput onRequestPickerClose={() => {}} open disablePortal />
     </>,
   );
 
@@ -64,444 +39,143 @@ test("logs a deprecation warning when disablePortal is used", async () => {
     "`disablePortal` is deprecated in DateInput and DateRange, and support will soon be removed.",
   );
   expect(loggerSpy).toHaveBeenCalledTimes(1);
-
   loggerSpy.mockRestore();
 });
 
-test("should not render the date picker when `open` is false", () => {
-  render(<DatePickerWithInput setOpen={() => {}} />);
-  const datePicker = screen.queryByRole("grid");
-
-  expect(datePicker).not.toBeInTheDocument();
-});
-
-test("should render the day element that matches the `selectedDate` when prop is set", () => {
+test("renders localized weekday headers", () => {
   render(
-    <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      setOpen={() => {}}
-      open
-    />,
+    <I18nProvider locale={deDE}>
+      <DatePickerWithInput
+        onRequestPickerClose={() => {}}
+        open
+        disablePortal
+        selectedDate={new Date(2019, 3, 4)}
+      />
+    </I18nProvider>,
   );
 
-  const selectedDay = screen.getByLabelText("Thursday, April 4th, 2019", {
-    exact: false,
-  });
-
-  expect(selectedDay).toHaveAttribute(
-    "aria-label",
-    "Thursday, April 4th, 2019, selected",
-  );
+  expect(screen.getByText("So", { selector: "span" })).toBeVisible();
+  expect(screen.getByText("Sonntag")).toBeInTheDocument();
 });
 
-test("should render the expected weekday with `aria-disabled=true` attribute when `minDate` is '2019-04-02'", () => {
-  render(
-    <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      minDate="2019-04-02"
-      setOpen={() => {}}
-      open
-    />,
-  );
-  const disabledDay = screen.getByLabelText("Monday, April 1st, 2019");
-  const activeDay = screen.getByLabelText("Tuesday, April 2nd, 2019");
+test("does not render when closed", () => {
+  render(<DatePickerWithInput onRequestPickerClose={() => {}} open={false} />);
 
-  expect(disabledDay).toBeDisabled();
-  expect(activeDay).toBeEnabled();
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
 });
 
-test("should not render any of the current month's weekdays with `aria-disabled=true` attribute when `minDate` is invalid", () => {
+test("renders month and year selects instead of navigation buttons", () => {
   render(
-    <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      minDate="2019-04-"
-      setOpen={() => {}}
-      open
-    />,
+    <DatePickerWithInput onRequestPickerClose={() => {}} open disablePortal />,
   );
-  // need to filter out the weekdays that are not in the current month
-  const currentMonthDays = screen.getAllByLabelText("April", { exact: false });
 
-  currentMonthDays.forEach((day) => {
-    expect(day).toBeEnabled();
-  });
+  expect(
+    screen.getByRole("combobox", { name: "Choose the month" }),
+  ).toBeVisible();
+  expect(
+    screen.getByRole("combobox", { name: "Choose the year" }),
+  ).toBeVisible();
+  expect(
+    screen.queryByRole("button", { name: "Previous month" }),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: "Next month" }),
+  ).not.toBeInTheDocument();
 });
 
-test("should not render any of the current month's weekdays with `aria-disabled=true` attribute when `minDate` is empty string", () => {
+test("renders the calendar dialog with a static aria-label from locale", () => {
   render(
-    <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      minDate=""
-      setOpen={() => {}}
-      open
-    />,
+    <DatePickerWithInput onRequestPickerClose={() => {}} open disablePortal />,
   );
-  // need to filter out the weekdays that are not in the current month
-  const currentMonthDays = screen.getAllByLabelText("April", { exact: false });
 
-  currentMonthDays.forEach((day) => {
-    expect(day).toBeEnabled();
-  });
-});
-
-test("should render the expected weekday with `aria-disabled=true` attribute when `maxDate` is '2019-04-05'", () => {
-  render(
-    <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      maxDate="2019-04-05"
-      setOpen={() => {}}
-      open
-    />,
+  expect(screen.getByRole("dialog")).toHaveAttribute(
+    "aria-label",
+    "Choose a date",
   );
-  const disabledDay = screen.getByLabelText("Saturday, April 6th, 2019");
-  const activeDay = screen.getByLabelText("Friday, April 5th, 2019");
-
-  expect(disabledDay).toBeDisabled();
-  expect(activeDay).toBeEnabled();
 });
 
-test("should not render any of the current month's weekdays with `aria-disabled=true` attribute when `maxDate` is invalid", () => {
+test("renders a Close button that closes the picker and refocuses the input", async () => {
+  const user = userEvent.setup();
+  const onRequestPickerClose = jest.fn();
   render(
     <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      maxDate="2019-04-"
-      setOpen={() => {}}
+      onRequestPickerClose={onRequestPickerClose}
       open
+      disablePortal
     />,
   );
-  // need to filter out the weekdays that are not in the current month
-  const currentMonthDays = screen.getAllByLabelText("April", { exact: false });
 
-  currentMonthDays.forEach((day) => {
-    expect(day).toBeEnabled();
-  });
-});
+  await user.click(screen.getByRole("button", { name: "Close" }));
 
-test("should not render any of the current month's weekdays with `aria-disabled=true` attribute when `maxDate` is empty string", () => {
-  render(
-    <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      maxDate=""
-      setOpen={() => {}}
-      open
-    />,
-  );
-  // need to filter out the weekdays that are not in the current month
-  const currentMonthDays = screen.getAllByLabelText("April", { exact: false });
-
-  currentMonthDays.forEach((day) => {
-    expect(day).toBeEnabled();
-  });
+  expect(onRequestPickerClose).toHaveBeenCalledTimes(1);
+  expect(screen.getByRole("textbox", { name: "Date" })).toHaveFocus();
 });
 
-test("should not call `onDayClick` callback when a user clicks a disabled day", async () => {
-  const user = userEvent.setup();
-  const onDayClick = jest.fn();
+test("disables dates outside the configured range", () => {
   render(
     <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      minDate="2019-04-02"
-      setOpen={() => {}}
+      onRequestPickerClose={() => {}}
       open
-      onDayClick={onDayClick}
+      disablePortal
+      selectedDate={new Date(2019, 3, 4)}
+      minDate="2019-04-04"
+      maxDate="2019-04-30"
     />,
   );
-  const disabledDay = screen.getByLabelText("Monday, April 1st, 2019");
-  await user.click(disabledDay);
 
-  expect(onDayClick).not.toHaveBeenCalled();
+  expect(
+    screen.getByRole("button", { name: "Wednesday, April 3rd, 2019" }),
+  ).toBeDisabled();
+  expect(
+    screen.getByRole("button", {
+      name: "Thursday, April 4th, 2019, selected",
+    }),
+  ).toBeEnabled();
 });
 
-test("should call `onDayClick` callback when a user clicks a day that is not disabled", async () => {
+test("allows navigating to, and viewing, a month outside minDate/maxDate via the selectors", async () => {
   const user = userEvent.setup();
-  const onDayClick = jest.fn();
   render(
     <DatePickerWithInput
-      selectedDays={new Date(2019, 3, 4)}
-      setOpen={() => {}}
+      onRequestPickerClose={() => {}}
       open
-      onDayClick={onDayClick}
+      disablePortal
+      selectedDate={new Date(2024, 5, 15)}
+      minDate="2024-06-10"
+      maxDate="2024-06-20"
     />,
   );
-  const activeDay = screen.getByLabelText("Tuesday, April 2nd, 2019");
-  await user.click(activeDay);
-
-  expect(onDayClick).toHaveBeenCalled();
-});
 
-test("should render with 'en-GB' translations by default when no `locale` passed via I18nProvider", () => {
-  render(
-    <I18nProvider>
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
+  await user.selectOptions(
+    screen.getByRole("combobox", { name: "Choose the year" }),
+    "2025",
   );
-  const weekdays = screen.getAllByRole("columnheader");
 
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, enGBLocale));
-  });
-});
-
-test("should render with 'de-DE' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "de-DE",
-        date: {
-          dateFnsLocale: () => deLocale,
-          ariaLabels: {
-            previousMonthButton: () => "de-DE-previous",
-            nextMonthButton: () => "de-DE-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
+  expect(screen.getByRole("combobox", { name: "Choose the year" })).toHaveValue(
+    "2025",
   );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, deLocale, 2));
-  });
-  expect(screen.getByRole("button", { name: "de-DE-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "de-DE-next" })).toBeVisible();
-});
-
-test("should render with 'es' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "es",
-        date: {
-          dateFnsLocale: () => esLocale,
-          ariaLabels: {
-            previousMonthButton: () => "es-previous",
-            nextMonthButton: () => "es-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
-  );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, esLocale));
-  });
-  expect(screen.getByRole("button", { name: "es-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "es-next" })).toBeVisible();
+  expect(
+    screen.getByRole("button", { name: "Monday, June 30th, 2025" }),
+  ).toBeDisabled();
 });
 
-test("should render with 'en-CA' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "en-CA",
-        date: {
-          dateFnsLocale: () => enCALocale,
-          ariaLabels: {
-            previousMonthButton: () => "en-CA-previous",
-            nextMonthButton: () => "en-CA-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
-  );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, enCALocale));
-  });
-  expect(screen.getByRole("button", { name: "en-CA-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "en-CA-next" })).toBeVisible();
-});
-
-test("should render with 'en-US' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "en-US",
-        date: {
-          dateFnsLocale: () => enUSLocale,
-          ariaLabels: {
-            previousMonthButton: () => "en-US-previous",
-            nextMonthButton: () => "en-US-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
-  );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, enUSLocale));
-  });
-  expect(screen.getByRole("button", { name: "en-US-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "en-US-next" })).toBeVisible();
-});
-
-test("should render with 'en-ZA' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "en-ZA",
-        date: {
-          dateFnsLocale: () => enZALocale,
-          ariaLabels: {
-            previousMonthButton: () => "en-ZA-previous",
-            nextMonthButton: () => "en-ZA-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
-  );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, enZALocale));
-  });
-  expect(screen.getByRole("button", { name: "en-ZA-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "en-ZA-next" })).toBeVisible();
-});
-
-test("should render with 'fr-FR' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "fr-FR",
-        date: {
-          dateFnsLocale: () => frLocale,
-          ariaLabels: {
-            previousMonthButton: () => "fr-FR-previous",
-            nextMonthButton: () => "fr-FR-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
-  );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, frLocale));
-  });
-  expect(screen.getByRole("button", { name: "fr-FR-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "fr-FR-next" })).toBeVisible();
-});
-
-test("should render with 'fr-CA' translations when the `locale` is passed via I18nProvider", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "fr-CA",
-        date: {
-          dateFnsLocale: () => frCALocale,
-          ariaLabels: {
-            previousMonthButton: () => "fr-CA-previous",
-            nextMonthButton: () => "fr-CA-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput setOpen={() => {}} open />
-    </I18nProvider>,
-  );
-  const weekdays = screen.getAllByRole("columnheader");
-
-  weekdays.forEach((weekday, i) => {
-    expect(weekday).toHaveTextContent(getWeekdayTranslations(i, frCALocale));
-  });
-  expect(screen.getByRole("button", { name: "fr-CA-previous" })).toBeVisible();
-  expect(screen.getByRole("button", { name: "fr-CA-next" })).toBeVisible();
-});
-
-test("should correctly translate the month caption for the given locale (fr-FR)", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "fr-FR",
-        date: {
-          dateFnsLocale: () => frLocale,
-          ariaLabels: {
-            previousMonthButton: () => "fr-FR-previous",
-            nextMonthButton: () => "fr-FR-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput
-        setOpen={() => {}}
-        open
-        selectedDays={new Date(2019, 2, 4)}
-      />
-    </I18nProvider>,
-  );
-
-  const monthCaption = screen.getByRole("status");
-  expect(monthCaption).toBeVisible();
-  expect(monthCaption).toHaveTextContent("mars 2019");
-});
-
-test("should correctly translate the month caption for the given locale (zh-CN)", () => {
-  render(
-    <I18nProvider
-      locale={{
-        locale: () => "zh-CN",
-        date: {
-          dateFnsLocale: () => zhCNLocale,
-          ariaLabels: {
-            previousMonthButton: () => "zh-CN-previous",
-            nextMonthButton: () => "zh-CN-next",
-          },
-        },
-      }}
-    >
-      <DatePickerWithInput
-        setOpen={() => {}}
-        open
-        selectedDays={new Date(2019, 2, 4)}
-      />
-    </I18nProvider>,
-  );
-
-  const monthCaption = screen.getByRole("status");
-  expect(monthCaption).toBeVisible();
-  expect(monthCaption).toHaveTextContent("三月 2019");
-});
-
-test("navigation buttons should maintain focus between month changes when using the keyboard", async () => {
-  const user = userEvent.setup();
+test("supports a custom yearRangeOffset to narrow the year selector options", () => {
   render(
     <DatePickerWithInput
-      setOpen={() => {}}
+      onRequestPickerClose={() => {}}
       open
-      selectedDays={new Date(2019, 3, 4)}
+      disablePortal
+      selectedDate={new Date(2025, 5, 15)}
+      yearRangeOffset={1}
     />,
   );
 
-  const textbox = screen.getByRole("textbox");
-  const monthLabel = screen.getByText("April 2019");
-  const previousButton = screen.getByRole("button", { name: "Previous month" });
-  const nextButton = screen.getByRole("button", { name: "Next month" });
+  const yearSelect = screen.getByRole("combobox", {
+    name: "Choose the year",
+  }) as HTMLSelectElement;
+  const optionValues = Array.from(yearSelect.options).map(
+    (option) => option.value,
+  );
 
-  await user.click(textbox);
-  await user.tab();
-  expect(previousButton).toHaveFocus();
-  await user.keyboard("{enter}");
-  expect(monthLabel).toHaveTextContent("March 2019");
-  expect(previousButton).toHaveFocus();
-  await user.tab();
-  expect(nextButton).toHaveFocus();
-  await user.keyboard("{enter}");
-  expect(monthLabel).toHaveTextContent("April 2019");
-  expect(nextButton).toHaveFocus();
+  expect(optionValues).toEqual(["2024", "2025", "2026"]);
 });
diff --git a/src/components/date/__internal__/date-picker/date-picker.types.ts b/src/components/date/__internal__/date-picker/date-picker.types.ts
new file mode 100644
index 0000000000..bfc36fd084
--- /dev/null
+++ b/src/components/date/__internal__/date-picker/date-picker.types.ts
@@ -0,0 +1,43 @@
+import type React from "react";
+import type { RefObject } from "react";
+import type { DayPickerProps } from "react-day-picker";
+
+export type PickerProps = Omit<DayPickerProps, "mode" | "modifiers"> & {
+  modifiers?: DayPickerProps["modifiers"];
+};
+
+export type DatePickerSize = "small" | "medium" | "large";
+
+export interface DatePickerProps {
+  /** @deprecated Portal placement is retained for legacy API compatibility. */
+  disablePortal?: boolean;
+  /** Minimum possible date in YYYY-MM-DD format. */
+  minDate?: string;
+  /** Maximum possible date in YYYY-MM-DD format. */
+  maxDate?: string;
+  /** Legacy DayPicker configuration. DateInput remains single-select. */
+  dayPickerProps?: PickerProps;
+  /** Element that the DatePicker will be displayed under. */
+  inputContainerRef: RefObject<HTMLElement>;
+  /** Currently selected date. */
+  selectedDate?: Date;
+  /** Callback to handle mousedown on the picker container. */
+  onPickerMouseDown?: () => void;
+  /** Sets whether the picker should be displayed. */
+  open?: boolean;
+  /** Callback triggered when a day is clicked. */
+  onDayClick?: (date: Date, ev: React.MouseEvent<HTMLDivElement>) => void;
+  /** Requests that the state owner close the picker. */
+  onRequestPickerClose: () => void;
+  /** Id passed to the tab guard element. */
+  pickerTabGuardId?: string;
+  /** Id for the date picker container. */
+  pickerId?: string;
+  /** Size of the associated date input. */
+  size?: DatePickerSize;
+  /**
+   * Number of years shown either side of the bounds/anchor year in the year
+   * selector. Defaults to 10.
+   */
+  yearRangeOffset?: number;
+}
diff --git a/src/components/date/__internal__/date-picker/date-picker.utils.test.ts b/src/components/date/__internal__/date-picker/date-picker.utils.test.ts
new file mode 100644
index 0000000000..5b12b457ca
--- /dev/null
+++ b/src/components/date/__internal__/date-picker/date-picker.utils.test.ts
@@ -0,0 +1,161 @@
+import {
+  buildYearRange,
+  getSelectedDateForMonth,
+  getMonthYearTransition,
+  normalizeDateBounds,
+  parseDateBound,
+  parseSelectInteger,
+} from "./date-picker.utils";
+
+test.each(["", "not-a-date", "2025-2-03", "2025-02-30"])(
+  "ignores invalid date bound %p",
+  (value) => {
+    expect(parseDateBound(value)).toBeUndefined();
+  },
+);
+
+test("parses valid date bounds with the shared date utility", () => {
+  expect(parseDateBound("2024-02-29")).toEqual(new Date(2024, 1, 29));
+});
+
+test.each([
+  ["0", 0],
+  ["2025", 2025],
+  ["-1", -1],
+  ["", undefined],
+  [" ", undefined],
+  ["01", undefined],
+  ["1.0", undefined],
+] as const)("parses canonical select integer %p", (value, expected) => {
+  expect(parseSelectInteger(value)).toBe(expected);
+});
+
+test("normalizes reversed date bounds", () => {
+  expect(
+    normalizeDateBounds({
+      minDate: "2027-04-10",
+      maxDate: "2025-09-20",
+    }),
+  ).toEqual({
+    minMonth: new Date(2025, 8, 20),
+    maxMonth: new Date(2027, 3, 10),
+  });
+});
+
+test("normalizes missing and already ordered date bounds", () => {
+  expect(normalizeDateBounds({})).toEqual({
+    minMonth: undefined,
+    maxMonth: undefined,
+  });
+  expect(
+    normalizeDateBounds({
+      minDate: "2025-04-10",
+      maxDate: "2027-09-20",
+    }),
+  ).toEqual({
+    minMonth: new Date(2025, 3, 10),
+    maxMonth: new Date(2027, 8, 20),
+  });
+});
+
+test("adds the offset as a buffer beyond a one-sided bound", () => {
+  expect(
+    buildYearRange({
+      minMonth: new Date(2025, 0, 1),
+      anchorYear: 2020,
+      includedYear: 2025,
+      offset: 2,
+    }),
+  ).toEqual([2023, 2024, 2025, 2026, 2027]);
+});
+
+test("shifts an unbounded range enough to include the displayed year", () => {
+  const years = buildYearRange({
+    anchorYear: 2200,
+    includedYear: 2025,
+    offset: 100,
+  });
+
+  expect(years[0]).toBe(2025);
+  expect(years.at(-1)).toBe(2225);
+});
+
+test("adds the offset beyond a wide bound as well", () => {
+  const years = buildYearRange({
+    minMonth: new Date(1900, 0, 1),
+    maxMonth: new Date(2200, 0, 1),
+    anchorYear: 2025,
+    includedYear: 2025,
+    offset: 10,
+  });
+
+  expect(years[0]).toBe(1890);
+  expect(years.at(-1)).toBe(2210);
+  expect(years).toHaveLength(321);
+});
+
+test("adds the offset as a buffer even when a bound is narrower than the offset", () => {
+  expect(
+    buildYearRange({
+      minMonth: new Date(2023, 0, 1),
+      maxMonth: new Date(2027, 0, 1),
+      anchorYear: 2025,
+      includedYear: 2025,
+      offset: 10,
+    }),
+  ).toEqual(
+    Array.from({ length: 25 }, (_, index) => 2013 + index), // 2013 - 2037
+  );
+});
+
+test("calculates a month and year transition without clamping to any bound", () => {
+  expect(
+    getMonthYearTransition({
+      displayedMonth: new Date(2025, 0, 15),
+      month: 0,
+      year: 2024,
+    }),
+  ).toEqual({
+    date: new Date(2024, 0, 1),
+    month: 0,
+    year: 2024,
+  });
+});
+
+test("clamps a selected month-end date to the target month", () => {
+  expect(
+    getSelectedDateForMonth({
+      selectedDate: new Date(2025, 0, 31),
+      month: 1,
+      year: 2025,
+    }),
+  ).toEqual(new Date(2025, 1, 28));
+});
+
+test.each([
+  [
+    new Date(2025, 3, 1),
+    new Date(2025, 3, 10),
+    undefined,
+    new Date(2025, 3, 10),
+  ],
+  [
+    new Date(2025, 8, 30),
+    undefined,
+    new Date(2025, 8, 20),
+    new Date(2025, 8, 20),
+  ],
+] as const)(
+  "clamps a selected date to the exact date bounds",
+  (selectedDate, minMonth, maxMonth, expected) => {
+    expect(
+      getSelectedDateForMonth({
+        selectedDate,
+        month: selectedDate.getMonth(),
+        year: selectedDate.getFullYear(),
+        minMonth,
+        maxMonth,
+      }),
+    ).toEqual(expected);
+  },
+);
diff --git a/src/components/date/__internal__/date-picker/date-picker.utils.ts b/src/components/date/__internal__/date-picker/date-picker.utils.ts
new file mode 100644
index 0000000000..87efdf60b7
--- /dev/null
+++ b/src/components/date/__internal__/date-picker/date-picker.utils.ts
@@ -0,0 +1,128 @@
+import { checkISOFormatAndLength, parseISODate } from "../utils/utils";
+
+export const parseDateBound = (value?: string) =>
+  value && checkISOFormatAndLength(value) ? parseISODate(value) : undefined;
+
+export const parseSelectInteger = (value: string) => {
+  const parsedValue = Number(value);
+
+  return Number.isSafeInteger(parsedValue) && String(parsedValue) === value
+    ? parsedValue
+    : undefined;
+};
+
+export const normalizeDateBounds = ({
+  minDate,
+  maxDate,
+  startMonth,
+  endMonth,
+}: {
+  minDate?: string;
+  maxDate?: string;
+  startMonth?: Date;
+  endMonth?: Date;
+}) => {
+  const lowerBound = startMonth || parseDateBound(minDate);
+  const upperBound = endMonth || parseDateBound(maxDate);
+
+  return lowerBound && upperBound && lowerBound > upperBound
+    ? { minMonth: upperBound, maxMonth: lowerBound }
+    : { minMonth: lowerBound, maxMonth: upperBound };
+};
+
+export const buildYearRange = ({
+  minMonth,
+  maxMonth,
+  anchorYear,
+  includedYear,
+  offset,
+}: {
+  minMonth?: Date;
+  maxMonth?: Date;
+  anchorYear: number;
+  includedYear: number;
+  offset: number;
+}) => {
+  const boundedAnchor = Math.min(
+    Math.max(anchorYear, minMonth?.getFullYear() ?? -Infinity),
+    maxMonth?.getFullYear() ?? Infinity,
+  );
+  const rangeAnchor = Math.min(
+    Math.max(boundedAnchor, includedYear - offset),
+    includedYear + offset,
+  );
+  // The offset is always added as a navigable buffer beyond a bound, so
+  // users can still browse years outside a narrow minDate/maxDate range
+  // (mirroring the always-enabled month selector). Without a bound on a
+  // side, that side falls back to a stable window around the anchor.
+  const firstYear = minMonth
+    ? minMonth.getFullYear() - offset
+    : rangeAnchor - offset;
+  const lastYear = maxMonth
+    ? maxMonth.getFullYear() + offset
+    : rangeAnchor + offset;
+
+  return Array.from(
+    { length: lastYear - firstYear + 1 },
+    (_, index) => firstYear + index,
+  );
+};
+
+export const getMonthYearTransition = ({
+  displayedMonth,
+  month,
+  year,
+}: {
+  displayedMonth: Date;
+  month: number;
+  year: number;
+}) => {
+  const date = new Date(displayedMonth);
+  date.setDate(1);
+  date.setFullYear(year);
+  date.setMonth(month);
+
+  return { date, month, year };
+};
+
+export const getSelectedDateForMonth = ({
+  selectedDate,
+  month,
+  year,
+  minMonth,
+  maxMonth,
+}: {
+  selectedDate: Date;
+  month: number;
+  year: number;
+  minMonth?: Date;
+  maxMonth?: Date;
+}) => {
+  const date = new Date(selectedDate);
+  const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
+
+  date.setDate(1);
+  date.setFullYear(year);
+  date.setMonth(month);
+  date.setDate(Math.min(selectedDate.getDate(), lastDayOfMonth));
+
+  if (
+    minMonth &&
+    date.getFullYear() === minMonth.getFullYear() &&
+    date.getMonth() === minMonth.getMonth() &&
+    date.getDate() < minMonth.getDate()
+  ) {
+    date.setDate(minMonth.getDate());
+  }
+
+  if (
+    maxMonth &&
+    date.getFullYear() === maxMonth.getFullYear() &&
+    date.getMonth() === maxMonth.getMonth() &&
+    date.getDate() > maxMonth.getDate()
+  ) {
+    date.setDate(maxMonth.getDate());
+  }
+
+  return date;
+};
diff --git a/src/components/date/__internal__/date-picker/day-picker.style.ts b/src/components/date/__internal__/date-picker/day-picker.style.ts
deleted file mode 100644
index 12adcf7162..0000000000
--- a/src/components/date/__internal__/date-picker/day-picker.style.ts
+++ /dev/null
@@ -1,463 +0,0 @@
-import styled, { css } from "styled-components";
-
-import applyBaseTheme from "../../../../style/themes/apply-base-theme";
-import addFocusStyling from "../../../../style/utils/add-focus-styling";
-
-const officialReactDayPickerStyling = () => css`
-  /* Variables declaration */
-  /* prettier-ignore */
-  .rdp-root {
-    --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
-    --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
-
-    --rdp-day-height: 2.75rem; /* The height of the day cells. */
-    --rdp-day-width: 2.75rem; /* The width of the day cells. */
-
-    --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
-    --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
-    --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
-    --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
-
-    --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
-    --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
-    --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
-    --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
-
-    --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
-
-    --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
-
-    --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
-    --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
-    --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
-    --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
-
-    --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
-    --rdp-range_middle-foreground-color: white; /* The foregraound color for days in the middle of a range. */
-    --rdp-range_middle-color: inherit;/* The color of the range text. */
-
-    --rdp-range_start-color: white; /* The color of the range text. */
-    --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
-    --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
-
-    --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
-    --rdp-range_end-color: white;/* The color of the range text. */
-    --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
-
-    --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
-    --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
-
-    --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
-    --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
-    --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
-    --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
-
-    --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
-    --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
-    --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
-
-    --rdp-gradient-direction: 90deg;
-  }
-
-  .rdp-root[dir="rtl"] {
-    --rdp-gradient-direction: -90deg;
-  }
-
-  /* Root of the component. */
-  .rdp-root {
-    position: relative; /* Required to position the navigation toolbar. */
-    box-sizing: border-box;
-  }
-
-  .rdp-root * {
-    box-sizing: border-box;
-  }
-
-  .rdp-day {
-    width: var(--sizing500);
-    height: var(--sizing450);
-    text-align: center;
-  }
-
-  .rdp-day_button {
-    background: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    min-width: var(--sizing500);
-    height: var(--sizing450);
-    border: var(--rdp-day_button-border);
-    border-radius: var(--rdp-day_button-border-radius);
-  }
-
-  .rdp-day_button:disabled {
-    cursor: revert;
-  }
-
-  .rdp-day_button {
-    outline: none;
-  }
-
-  .rdp-caption_label {
-    z-index: 1;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .rdp-button_next,
-  .rdp-button_previous {
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    font: inherit;
-    color: inherit;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    appearance: none;
-    width: var(--rdp-nav_button-width);
-    height: var(--rdp-nav_button-height);
-  }
-
-  .rdp-button_next:disabled,
-  .rdp-button_previous:disabled {
-    cursor: revert;
-    opacity: var(--rdp-nav_button-disabled-opacity);
-  }
-
-  .rdp-chevron {
-    display: inline-block;
-    fill: var(--rdp-accent-color);
-  }
-
-  .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
-    transform: rotate(180deg);
-  }
-
-  .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
-    transform: rotate(180deg);
-    transform-origin: 50%;
-  }
-
-  .rdp-dropdowns {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--rdp-dropdown-gap);
-  }
-  .rdp-dropdown {
-    z-index: 2;
-    /* Reset */
-    opacity: 0;
-    appearance: none;
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    cursor: inherit;
-    border: none;
-    line-height: inherit;
-  }
-
-  .rdp-dropdown_root {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
-    opacity: var(--rdp-disabled-opacity);
-  }
-
-  .rdp-month_caption {
-    display: flex;
-    align-content: center;
-    height: var(--rdp-nav-height);
-    font-weight: bold;
-    font-size: large;
-  }
-
-  .rdp-months {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--rdp-months-gap);
-    max-width: fit-content;
-  }
-
-  .rdp-month_grid {
-    border-collapse: collapse;
-  }
-
-  .rdp-nav {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    display: flex;
-    align-items: center;
-    height: var(--rdp-nav-height);
-    width: 100%;
-  }
-
-  .rdp-weekday {
-    opacity: var(--rdp-weekday-opacity);
-    padding: var(--rdp-weekday-padding);
-    font-weight: 500;
-    font-size: smaller;
-    text-align: var(--rdp-weekday-text-align);
-    text-transform: var(--rdp-weekday-text-transform);
-  }
-
-  .rdp-week_number {
-    opacity: var(--rdp-week_number-opacity);
-    font-weight: 400;
-    font-size: small;
-    height: var(--rdp-week_number-height);
-    width: var(--rdp-week_number-width);
-    border: var(--rdp-week_number-border);
-    border-radius: var(--rdp-week_number-border-radius);
-    text-align: var(--rdp-weeknumber-text-align);
-  }
-
-  /* DAY MODIFIERS */
-  .rdp-today:not(.rdp-outside) {
-    color: var(--rdp-today-color);
-  }
-
-  .rdp-selected {
-    font-weight: bold;
-    font-size: large;
-  }
-
-  .rdp-selected .rdp-day_button {
-    border: var(--rdp-selected-border);
-  }
-
-  .rdp-outside {
-    opacity: var(--rdp-outside-opacity);
-  }
-
-  .rdp-disabled {
-    opacity: var(--rdp-disabled-opacity);
-  }
-
-  .rdp-hidden {
-    visibility: hidden;
-    color: var(--rdp-range_start-color);
-  }
-
-  .rdp-range_start {
-    background: var(--rdp-range_start-background);
-  }
-
-  .rdp-range_start .rdp-day_button {
-    background-color: var(--rdp-range_start-date-background-color);
-    color: var(--rdp-range_start-color);
-  }
-
-  .rdp-range_middle {
-    background-color: var(--rdp-range_middle-background-color);
-  }
-
-  .rdp-range_middle .rdp-day_button {
-    border-color: transparent;
-    border: unset;
-    border-radius: unset;
-    color: var(--rdp-range_middle-color);
-  }
-
-  .rdp-range_end {
-    background: var(--rdp-range_end-background);
-    color: var(--rdp-range_end-color);
-  }
-
-  .rdp-range_end .rdp-day_button {
-    color: var(--rdp-range_start-color);
-    background-color: var(--rdp-range_end-date-background-color);
-  }
-
-  .rdp-range_start.rdp-range_end {
-    background: revert;
-  }
-
-  .rdp-focusable {
-    cursor: pointer;
-  }
-`;
-
-const StyledDayPicker = styled.div.attrs(applyBaseTheme)`
-  ${officialReactDayPickerStyling}
-  z-index: 2000;
-
-  .rdp-root {
-    top: calc(100% + 1px);
-    left: 0;
-    background-color: var(--colorsUtilityYang100);
-    box-shadow: var(--boxShadow100);
-    display: block;
-    overflow: hidden;
-    padding: var(--spacing300);
-    text-align: center;
-    user-select: none;
-    border-radius: var(--borderRadius050);
-  }
-
-  .rdp-root * {
-    box-sizing: border-box;
-  }
-
-  .rdp-root:focus {
-    outline: none;
-  }
-
-  .rdp-root abbr[title] {
-    border: none;
-    cursor: initial;
-  }
-
-  .rdp-months {
-    padding: 0;
-  }
-
-  .rdp-month {
-    margin: 0 0 2px;
-  }
-
-  .rdp-month_grid,
-  .rdp_weeks {
-    width: 100%;
-    margin-top: 8px;
-  }
-
-  .rdp-month_caption {
-    color: var(--colorsActionMajorYin090);
-    line-height: var(--sizing500);
-    height: var(--sizing500);
-    font-size: 16px;
-    font-weight: 800;
-    display: block;
-
-    > div {
-      margin: 0 auto;
-      width: 80%;
-    }
-  }
-
-  .rdp-weekday {
-    border: medium;
-    width: var(--sizing500);
-    height: var(--sizing450);
-    font-weight: 800;
-    color: var(--colorsActionMinor500);
-    text-transform: uppercase;
-    font-size: 12px;
-    text-align: center;
-  }
-
-  .rdp-day {
-    min-width: var(--sizing500);
-    height: var(--sizing450);
-    padding: 0;
-    background-color: transparent;
-    cursor: pointer;
-    border: none;
-    font-weight: var(--fontWeights500);
-    font-size: var(--fontSizes100);
-    line-height: var(--lineHeights500);
-    border-radius: var(--borderRadius400);
-
-    &:hover {
-      background-color: var(--colorsActionMinor050);
-      color: var(--colorsActionMajorYin090);
-    }
-
-    + * {
-      border-left: 1px;
-    }
-
-    abbr {
-      text-decoration: none;
-    }
-  }
-
-  .rdp-today,
-  .rdp-today.rdp-outside {
-    color: var(--colorsActionMajorYin090);
-    background-color: var(--colorsActionMinor200);
-  }
-
-  .rdp-outside {
-    color: var(--colorsActionMajorYin055);
-    background-color: transparent;
-  }
-
-  .rdp-today:not(.rdp-outside) {
-    font-weight: var(--fontWeights500);
-    border-radius: var(--borderRadius400);
-    color: inherit;
-  }
-
-  .rdp-disabled,
-  .rdp-disabled:hover {
-    color: var(--colorsActionMajorYin030);
-    background-color: var(--colorsUtilityYang100);
-    cursor: default;
-
-    &.rdp-today {
-      background-color: var(--colorsActionMinor200);
-    }
-  }
-
-  .rdp-selected:not(.rdp-disabled):not(.rdp-outside) {
-    background-color: var(--colorsActionMajor500);
-    color: var(--colorsUtilityYang100);
-    border-radius: var(--borderRadius400);
-  }
-
-  .rdp-selected.rdp-disabled:not(.rdp-outside) {
-    background-color: var(--colorsActionMajor500);
-    color: var(--colorsUtilityYang100);
-  }
-
-  .rdp-selected {
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  .rdp-selected .rdp-day_button {
-    border: none;
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  .rdp-focused:not(.rdp-disabled):not(.rdp-outside) {
-    ${addFocusStyling(true)}
-    border-radius: var(--borderRadius400);
-  }
-
-  .rdp-day.rdp-selected {
-    &:focus {
-      ${addFocusStyling(true)}
-    }
-  }
-`;
-
-export default StyledDayPicker;
diff --git a/src/components/date/__internal__/date-picker/index.ts b/src/components/date/__internal__/date-picker/index.ts
index 0cac617ca5..a3ad3cb263 100644
--- a/src/components/date/__internal__/date-picker/index.ts
+++ b/src/components/date/__internal__/date-picker/index.ts
@@ -1,2 +1,6 @@
-export { default } from "./date-picker.component";
-export type { DatePickerProps, PickerProps } from "./date-picker.component";
+export { default, DatePicker } from "./date-picker.component";
+export type {
+  DatePickerSize,
+  DatePickerProps,
+  PickerProps,
+} from "./date-picker.types";
diff --git a/src/components/date/__internal__/hooks/useDateInputState.test.ts b/src/components/date/__internal__/hooks/useDateInputState.test.ts
new file mode 100644
index 0000000000..1156573476
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDateInputState.test.ts
@@ -0,0 +1,194 @@
+import { act, renderHook } from "@testing-library/react";
+import { enGB } from "date-fns/locale";
+
+import getFormatData from "../date-formats";
+import { formattedValue } from "../utils/utils";
+import useDateInputState from "./useDateInputState";
+
+const { format, formats } = getFormatData(enGB);
+
+const renderUseDateInputState = (value: string, allowEmptyValue?: boolean) =>
+  renderHook(
+    ({ currentValue }) =>
+      useDateInputState({
+        allowEmptyValue,
+        format,
+        formats,
+        value: currentValue,
+      }),
+    { initialProps: { currentValue: value } },
+  );
+
+test("parses an initial locale-formatted value", () => {
+  const { result } = renderUseDateInputState("16/03/2019");
+
+  expect(formattedValue(format, result.current.selectedDate)).toBe(
+    "16/03/2019",
+  );
+});
+
+test("does not select an invalid initial value", () => {
+  const { result } = renderUseDateInputState("not a date");
+
+  expect(result.current.selectedDate).toBeUndefined();
+});
+
+test("updates the selected date when the controlled value changes", () => {
+  const { result, rerender } = renderUseDateInputState("16/03/2019");
+
+  rerender({ currentValue: "17/03/2019" });
+
+  expect(formattedValue(format, result.current.selectedDate)).toBe(
+    "17/03/2019",
+  );
+});
+
+test("exposes matching input and selected-date values in every render", () => {
+  const renderedValues: { displayValue: string; selectedDate?: string }[] = [];
+  const { rerender } = renderHook(
+    ({ currentValue }) => {
+      const state = useDateInputState({
+        format,
+        formats,
+        value: currentValue,
+      });
+
+      renderedValues.push({
+        displayValue: state.displayValue,
+        selectedDate: state.selectedDate
+          ? formattedValue(format, state.selectedDate)
+          : undefined,
+      });
+
+      return state;
+    },
+    { initialProps: { currentValue: "2019-03-16" } },
+  );
+
+  rerender({ currentValue: "2019-03-17" });
+
+  expect(renderedValues).toEqual([
+    { displayValue: "16/03/2019", selectedDate: "16/03/2019" },
+    { displayValue: "17/03/2019", selectedDate: "17/03/2019" },
+  ]);
+});
+
+test("builds a Date change event for valid input", () => {
+  const { result } = renderUseDateInputState("16/03/2019");
+
+  expect(
+    result.current.createDateChangeEvent({
+      type: "change",
+      target: {
+        id: "date-input",
+        name: "date",
+        value: "16/03/2019",
+      },
+    }),
+  ).toEqual({
+    target: {
+      id: "date-input",
+      name: "date",
+      value: {
+        formattedValue: "16/03/2019",
+        rawValue: "2019-03-16",
+      },
+    },
+  });
+});
+
+test("returns an empty raw value when empty values are allowed", () => {
+  const { result } = renderUseDateInputState("", true);
+
+  expect(
+    result.current.createDateChangeEvent({
+      type: "change",
+      target: { value: "" },
+    }).target.value,
+  ).toEqual({
+    formattedValue: "",
+    rawValue: "",
+  });
+});
+
+test("uses the selected date as the formatted value on blur", () => {
+  const { result } = renderUseDateInputState("16/03/2019");
+
+  expect(
+    result.current.createDateChangeEvent({
+      type: "blur",
+      target: { value: "16.03.2019" },
+    }).target.value,
+  ).toEqual({
+    formattedValue: "16/03/2019",
+    rawValue: "2019-03-16",
+  });
+});
+
+test("reports an unchanged display value for an ISO value", () => {
+  const { result } = renderUseDateInputState("2019-03-16");
+
+  expect(result.current.valueNeedsFormatting).toBe(false);
+});
+
+test("formats an initial ISO value for display", () => {
+  const { result } = renderUseDateInputState("2019-03-16");
+
+  expect(result.current.displayValue).toBe("16/03/2019");
+});
+
+test("returns the controlled value after the input has changed", () => {
+  const { result, rerender } = renderUseDateInputState("16/03/2019");
+
+  act(() => result.current.trackEditedValue("16.03.2019"));
+  rerender({ currentValue: "16.03.2019" });
+
+  expect(result.current.displayValue).toBe("16.03.2019");
+});
+
+test("normalizes an external ISO update after the input has changed", () => {
+  const { result, rerender } = renderUseDateInputState("16/03/2019");
+
+  act(() => result.current.trackEditedValue("16.03.2019"));
+  rerender({ currentValue: "16.03.2019" });
+  rerender({ currentValue: "2019-03-17" });
+
+  expect(result.current.displayValue).toBe("17/03/2019");
+  expect(formattedValue(format, result.current.selectedDate)).toBe(
+    "17/03/2019",
+  );
+});
+
+test("does not treat an old edited value as a later controlled echo", () => {
+  const { result, rerender } = renderUseDateInputState("16/03/2019");
+
+  act(() => result.current.trackEditedValue("16.03.2019"));
+  rerender({ currentValue: "16.03.2019" });
+  expect(result.current.displayValue).toBe("16.03.2019");
+
+  rerender({ currentValue: "17/03/2019" });
+  rerender({ currentValue: "16.03.2019" });
+
+  expect(result.current.displayValue).toBe("16/03/2019");
+});
+
+test("keeps an initial value normalized across rerenders", () => {
+  const { result, rerender } = renderUseDateInputState("16.03.2019");
+
+  expect(result.current.displayValue).toBe("16/03/2019");
+
+  rerender({ currentValue: "16.03.2019" });
+
+  expect(result.current.displayValue).toBe("16/03/2019");
+});
+
+test("formats controlled ISO updates while the input is pristine", () => {
+  const { result, rerender } = renderUseDateInputState("2019-03-16");
+
+  rerender({ currentValue: "2019-03-17" });
+
+  expect(result.current.displayValue).toBe("17/03/2019");
+  expect(formattedValue(format, result.current.selectedDate)).toBe(
+    "17/03/2019",
+  );
+});
diff --git a/src/components/date/__internal__/hooks/useDateInputState.ts b/src/components/date/__internal__/hooks/useDateInputState.ts
new file mode 100644
index 0000000000..e386e53989
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDateInputState.ts
@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState } from "react";
+
+import {
+  checkISOFormatAndLength,
+  findMatchedFormatAndValue,
+  formattedValue,
+  parseISODate,
+} from "../utils/utils";
+import {
+  buildDateChangeEvent,
+  type DateInputEvent,
+  getDateInputState,
+} from "../utils/date-input-value.utils";
+
+interface UseDateInputStateProps {
+  allowEmptyValue?: boolean;
+  format: string;
+  formats: string[];
+  value: string;
+}
+
+/** Derives the selected date and display value while preserving in-progress input. */
+const useDateInputState = ({
+  allowEmptyValue,
+  format,
+  formats,
+  value,
+}: UseDateInputStateProps) => {
+  const [isInputPristine, setIsInputPristine] = useState(true);
+
+  // Store the value prop at the time of the edit and the edited input value.
+  // Preserve the user's formatting while value matches either.
+  const valueChangeTracking = useRef<{
+    editedInputValue?: string;
+    valuePropBeforeEdit?: string;
+  }>({});
+  const shouldFormatValue =
+    isInputPristine || value !== valueChangeTracking.current.editedInputValue;
+
+  useEffect(() => {
+    if (
+      !isInputPristine &&
+      value !== valueChangeTracking.current.valuePropBeforeEdit &&
+      value !== valueChangeTracking.current.editedInputValue
+    ) {
+      valueChangeTracking.current = {};
+      setIsInputPristine(true);
+    }
+  }, [isInputPristine, value]);
+
+  // Changing locale or dateFormatOverride while the user is editing is unsupported.
+  const { displayValue, selectedDate } = getDateInputState(
+    value,
+    format,
+    formats,
+    shouldFormatValue,
+  );
+
+  const trackEditedValue = (editedValue: string) => {
+    valueChangeTracking.current = {
+      editedInputValue: editedValue,
+      valuePropBeforeEdit: value,
+    };
+    setIsInputPristine(false);
+  };
+
+  const createDateChangeEvent = (event: DateInputEvent) =>
+    buildDateChangeEvent({
+      allowEmptyValue,
+      event,
+      format,
+      formats,
+      selectedDate,
+    });
+
+  const valueForComparison = checkISOFormatAndLength(value)
+    ? formattedValue(format, parseISODate(value))
+    : value;
+  const [, matchedValue] = findMatchedFormatAndValue(
+    valueForComparison,
+    formats,
+  );
+  const valueNeedsFormatting =
+    formattedValue(format, selectedDate) !== matchedValue;
+
+  return {
+    displayValue,
+    selectedDate,
+    createDateChangeEvent,
+    valueNeedsFormatting,
+    trackEditedValue,
+  };
+};
+
+export default useDateInputState;
diff --git a/src/components/date/__internal__/hooks/useDatePickerFocus.test.ts b/src/components/date/__internal__/hooks/useDatePickerFocus.test.ts
new file mode 100644
index 0000000000..0da1e37211
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerFocus.test.ts
@@ -0,0 +1,33 @@
+import { renderHook } from "@testing-library/react";
+
+import useDatePickerFocus from "./useDatePickerFocus";
+
+test("focuses a day on open and resets selector state on close", () => {
+  jest.useFakeTimers();
+  const focusTarget = document.createElement("button");
+  document.body.appendChild(focusTarget);
+  const resetChangedSelector = jest.fn();
+  const getPickerDayFocusTarget = jest.fn(() => focusTarget);
+  const { rerender } = renderHook(
+    ({ open }) =>
+      useDatePickerFocus({
+        open,
+        getPickerDayFocusTarget,
+        resetChangedSelector,
+      }),
+    { initialProps: { open: false } },
+  );
+
+  expect(resetChangedSelector).toHaveBeenCalledTimes(1);
+
+  rerender({ open: true });
+  jest.runOnlyPendingTimers();
+  expect(getPickerDayFocusTarget).toHaveBeenCalledTimes(1);
+  expect(focusTarget).toHaveFocus();
+
+  rerender({ open: false });
+
+  expect(resetChangedSelector).toHaveBeenCalledTimes(2);
+  focusTarget.remove();
+  jest.useRealTimers();
+});
diff --git a/src/components/date/__internal__/hooks/useDatePickerFocus.ts b/src/components/date/__internal__/hooks/useDatePickerFocus.ts
new file mode 100644
index 0000000000..e77f2a4b17
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerFocus.ts
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+interface UseDatePickerFocusProps {
+  open?: boolean;
+  getPickerDayFocusTarget: () => HTMLElement | null | undefined;
+  resetChangedSelector: () => void;
+}
+
+/** Moves focus to the preferred day when the picker opens. */
+const useDatePickerFocus = ({
+  open,
+  getPickerDayFocusTarget,
+  resetChangedSelector,
+}: UseDatePickerFocusProps) => {
+  // Focus the selected date, today, or first available day when opening the picker.
+  useEffect(() => {
+    if (!open) {
+      resetChangedSelector();
+      return undefined;
+    }
+
+    // Wait for the popover content and DayPicker focus effects to finish mounting.
+    const timeout = setTimeout(() => getPickerDayFocusTarget()?.focus(), 0);
+    return () => clearTimeout(timeout);
+  }, [getPickerDayFocusTarget, open, resetChangedSelector]);
+};
+
+export default useDatePickerFocus;
diff --git a/src/components/date/__internal__/hooks/useDatePickerInFlatTable.test.tsx b/src/components/date/__internal__/hooks/useDatePickerInFlatTable.test.tsx
new file mode 100644
index 0000000000..6b4f747462
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerInFlatTable.test.tsx
@@ -0,0 +1,65 @@
+import { renderHook } from "@testing-library/react";
+import React, { PropsWithChildren } from "react";
+
+import FlatTableContext from "../../../flat-table/__internal__/flat-table.context";
+import useDatePickerInFlatTable from "./useDatePickerInFlatTable";
+
+test("updates the FlatTable state when the picker opens and closes", () => {
+  const setHasOpenDatePicker = jest.fn();
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <FlatTableContext.Provider
+      value={{ isInFlatTable: true, setHasOpenDatePicker }}
+    >
+      {children}
+    </FlatTableContext.Provider>
+  );
+  const { rerender } = renderHook(
+    ({ open }) => useDatePickerInFlatTable(open),
+    { initialProps: { open: true }, wrapper },
+  );
+
+  expect(setHasOpenDatePicker).toHaveBeenLastCalledWith(true);
+
+  rerender({ open: false });
+
+  expect(setHasOpenDatePicker).toHaveBeenLastCalledWith(false);
+});
+
+test("clears the FlatTable state when the picker unmounts", () => {
+  const setHasOpenDatePicker = jest.fn();
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <FlatTableContext.Provider
+      value={{ isInFlatTable: true, setHasOpenDatePicker }}
+    >
+      {children}
+    </FlatTableContext.Provider>
+  );
+  const { result, unmount } = renderHook(() => useDatePickerInFlatTable(true), {
+    wrapper,
+  });
+
+  expect(result.current.isInFlatTable).toBe(true);
+
+  unmount();
+
+  expect(setHasOpenDatePicker).toHaveBeenLastCalledWith(false);
+});
+
+test("does not update the FlatTable state for a closed picker", () => {
+  const setHasOpenDatePicker = jest.fn();
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <FlatTableContext.Provider
+      value={{ isInFlatTable: true, setHasOpenDatePicker }}
+    >
+      {children}
+    </FlatTableContext.Provider>
+  );
+
+  const { unmount } = renderHook(() => useDatePickerInFlatTable(false), {
+    wrapper,
+  });
+
+  unmount();
+
+  expect(setHasOpenDatePicker).not.toHaveBeenCalled();
+});
diff --git a/src/components/date/__internal__/hooks/useDatePickerInFlatTable.ts b/src/components/date/__internal__/hooks/useDatePickerInFlatTable.ts
new file mode 100644
index 0000000000..06b9e8a879
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerInFlatTable.ts
@@ -0,0 +1,21 @@
+import { useContext, useEffect } from "react";
+
+import FlatTableContext from "../../../flat-table/__internal__/flat-table.context";
+
+/** Coordinates an open picker with its containing FlatTable. */
+const useDatePickerInFlatTable = (open?: boolean) => {
+  const { isInFlatTable, setHasOpenDatePicker } = useContext(FlatTableContext);
+
+  // Prevent FlatTable interactions from interfering with an open date picker.
+  useEffect(() => {
+    if (!open) return undefined;
+
+    setHasOpenDatePicker?.(true);
+
+    return () => setHasOpenDatePicker?.(false);
+  }, [open, setHasOpenDatePicker]);
+
+  return { isInFlatTable };
+};
+
+export default useDatePickerInFlatTable;
diff --git a/src/components/date/__internal__/hooks/useDatePickerKeyboardNavigation.test.ts b/src/components/date/__internal__/hooks/useDatePickerKeyboardNavigation.test.ts
new file mode 100644
index 0000000000..b02ceb68b6
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerKeyboardNavigation.test.ts
@@ -0,0 +1,591 @@
+import { act, renderHook, within } from "@testing-library/react";
+import React from "react";
+
+import useDatePickerKeyboardNavigation from "./useDatePickerKeyboardNavigation";
+
+const renderKeyboardNavigation = (
+  picker: HTMLDivElement,
+  { open = true, onEscape = jest.fn() } = {},
+) => {
+  document.body.appendChild(picker);
+  const ref = { current: picker } as React.RefObject<HTMLDivElement>;
+
+  return renderHook(() =>
+    useDatePickerKeyboardNavigation({
+      ref,
+      open,
+      monthSelectId: "month",
+      yearSelectId: "year",
+      onEscape,
+    }),
+  );
+};
+
+const keyboardEvent = (key: string, { shiftKey = false } = {}) =>
+  ({
+    key,
+    shiftKey,
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+  }) as unknown as React.KeyboardEvent<HTMLDivElement>;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+test("returns the first enabled day when selected and today are disabled", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <div class="rdp-selected"><button class="rdp-day_button" disabled>Selected</button></div>
+    <div class="rdp-today"><button class="rdp-day_button" disabled>Today</button></div>
+    <button class="rdp-day_button">Available</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+
+  expect(result.current.getPickerDayFocusTarget()).toHaveTextContent(
+    "Available",
+  );
+});
+
+test("ignores disabled and aria-disabled days when choosing a focus target", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <div class="rdp-selected"><button class="rdp-day_button" aria-disabled="true">Selected</button></div>
+    <div class="rdp-today"><button class="rdp-day_button" disabled>Today</button></div>
+    <button class="rdp-day_button">Available</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+
+  expect(result.current.getPickerDayFocusTarget()).toHaveTextContent(
+    "Available",
+  );
+});
+
+test("returns no day focus target when every day is disabled", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button" disabled>Disabled</button>
+    <button class="rdp-day_button" aria-disabled="true">Aria disabled</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+
+  expect(result.current.getPickerDayFocusTarget()).toBeNull();
+});
+
+test.each([
+  [
+    "focused",
+    '<button class="rdp-day_button">Fallback</button><button class="rdp-day_button">Focused</button>',
+    "Focused",
+  ],
+  [
+    "selected",
+    '<button class="rdp-day_button">Fallback</button><div class="rdp-selected"><button class="rdp-day_button">Selected</button></div>',
+    "Selected",
+  ],
+  [
+    "today",
+    '<button class="rdp-day_button">Fallback</button><div class="rdp-today"><button class="rdp-day_button">Today</button></div>',
+    "Today",
+  ],
+])("prioritizes the %s day as the focus target", (_, markup, expected) => {
+  const picker = document.createElement("div");
+  // Test cases contain fixed local markup rather than user-provided content.
+  // eslint-disable-next-line no-unsanitized/property
+  picker.innerHTML = markup;
+  const { result } = renderKeyboardNavigation(picker);
+  const target = within(picker).getByRole("button", { name: expected });
+  if (expected === "Focused") target.focus();
+
+  expect(result.current.getPickerDayFocusTarget()).toBe(target);
+});
+
+test("handles Escape only while the picker is open", () => {
+  const picker = document.createElement("div");
+  const onEscape = jest.fn();
+  const { result, rerender } = renderKeyboardNavigation(picker, {
+    onEscape,
+  });
+  const escapeEvent = keyboardEvent("Escape");
+
+  act(() => result.current.handleKeyUp(escapeEvent));
+
+  expect(onEscape).toHaveBeenCalledTimes(1);
+  expect(escapeEvent.stopPropagation).toHaveBeenCalledTimes(1);
+
+  rerender();
+  const enterEvent = keyboardEvent("Enter");
+  act(() => result.current.handleKeyUp(enterEvent));
+  expect(onEscape).toHaveBeenCalledTimes(1);
+
+  const { result: closedResult } = renderKeyboardNavigation(
+    document.createElement("div"),
+    { open: false, onEscape },
+  );
+  act(() => closedResult.current.handleKeyUp(keyboardEvent("Escape")));
+  expect(onEscape).toHaveBeenCalledTimes(1);
+});
+
+test("moves focus forward through enabled controls and wraps", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <select id="month" disabled><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const day = within(picker).getByRole("button", { name: "Day" });
+  const close = within(picker).getByRole("button", { name: "Close" });
+  const year = within(picker).getAllByRole("combobox")[1];
+
+  day.focus();
+  const firstTab = keyboardEvent("Tab");
+  act(() => result.current.handleKeyDown(firstTab));
+  expect(firstTab.preventDefault).toHaveBeenCalledTimes(1);
+  expect(close).toHaveFocus();
+
+  close.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+  expect(year).toHaveFocus();
+
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+  expect(day).toHaveFocus();
+});
+
+test("preserves the established day, close, month, year focus order", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const day = within(picker).getByRole("button", { name: "Day" });
+  const close = within(picker).getByRole("button", { name: "Close" });
+  const [month, year] = within(picker).getAllByRole("combobox");
+
+  day.focus();
+  [close, month, year, day].forEach((expectedControl) => {
+    act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+    expect(expectedControl).toHaveFocus();
+  });
+});
+
+test("excludes disabled and aria-disabled controls from the focus order", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close" aria-disabled="true">Close</button>
+    <select id="month" disabled><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const day = within(picker).getByRole("button", { name: "Day" });
+  const year = within(picker).getAllByRole("combobox")[1];
+
+  day.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(year).toHaveFocus();
+});
+
+test("excludes controls disabled by a fieldset from the focus order", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <fieldset disabled><button>Disabled action</button></fieldset>
+    <button>Enabled action</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const close = within(picker).getByRole("button", { name: "Close" });
+  const enabledAction = within(picker).getByRole("button", {
+    name: "Enabled action",
+  });
+
+  close.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(enabledAction).toHaveFocus();
+});
+
+test("includes custom focusable picker content in the focus trap", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+    <a href="#custom">Custom action</a>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const day = within(picker).getByRole("button", { name: "Day" });
+  const customAction = within(picker).getByRole("link", {
+    name: "Custom action",
+  });
+
+  customAction.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+  expect(day).toHaveFocus();
+
+  day.focus();
+  act(() =>
+    result.current.handleKeyDown(keyboardEvent("Tab", { shiftKey: true })),
+  );
+  expect(customAction).toHaveFocus();
+});
+
+test("includes contenteditable picker content in the focus trap", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <div contenteditable="true">Editable content</div>
+  `;
+  const editableContent = within(picker).getByText("Editable content");
+  // JSDOM does not implement contenteditable's native tabIndex behavior.
+  Object.defineProperty(editableContent, "tabIndex", { value: 0 });
+  const { result } = renderKeyboardNavigation(picker);
+  const close = within(picker).getByRole("button", { name: "Close" });
+
+  close.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(editableContent).toHaveFocus();
+});
+
+test("excludes hidden and inert custom content from the focus trap", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <button hidden>Hidden</button>
+    <div inert><button>Inert</button></div>
+    <button style="display: none">Not displayed</button>
+    <button style="visibility: hidden">Not visible</button>
+    <button>Visible custom control</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const close = within(picker).getByRole("button", { name: "Close" });
+  const visibleCustomControl = within(picker).getByRole("button", {
+    name: "Visible custom control",
+  });
+
+  close.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+  expect(visibleCustomControl).toHaveFocus();
+
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+  expect(within(picker).getByRole("button", { name: "Day" })).toHaveFocus();
+});
+
+test("traps focus among enabled controls when no enabled day exists", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button" disabled>Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const close = within(picker).getByRole("button", { name: "Close" });
+  const year = within(picker).getAllByRole("combobox")[1];
+
+  year.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(close).toHaveFocus();
+});
+
+test("continues the focus order after a selector changes when no day is enabled", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button" disabled>Day</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const [month, year] = within(picker).getAllByRole("combobox");
+  month.focus();
+
+  act(() => {
+    result.current.markSelectorChanged("month");
+    result.current.handleKeyDown(keyboardEvent("Tab"));
+  });
+
+  expect(year).toHaveFocus();
+});
+
+test("moves focus backward, wraps, and clears a pending selector change", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <button data-role="date-picker-close">Close</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const day = within(picker).getByRole("button", { name: "Day" });
+  const year = within(picker).getAllByRole("combobox")[1];
+  day.focus();
+
+  act(() => {
+    result.current.markSelectorChanged("year");
+    result.current.handleKeyDown(keyboardEvent("Tab", { shiftKey: true }));
+  });
+  expect(year).toHaveFocus();
+
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+  expect(day).toHaveFocus();
+});
+
+test("does not handle Tab when focus is outside the managed controls", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = '<button class="rdp-day_button">Available</button>';
+  const outside = document.createElement("button");
+  document.body.appendChild(outside);
+  const { result } = renderKeyboardNavigation(picker);
+  outside.focus();
+  const preventDefault = jest.fn();
+
+  act(() => {
+    result.current.handleKeyDown({
+      key: "Tab",
+      shiftKey: false,
+      preventDefault,
+    } as unknown as React.KeyboardEvent<HTMLDivElement>);
+  });
+
+  expect(preventDefault).not.toHaveBeenCalled();
+  expect(outside).toHaveFocus();
+});
+
+test("does not handle a day control outside the picker", () => {
+  const picker = document.createElement("div");
+  const outside = document.createElement("button");
+  outside.className = "rdp-day_button";
+  document.body.appendChild(outside);
+  const { result } = renderKeyboardNavigation(picker);
+  outside.focus();
+  const event = keyboardEvent("Tab");
+
+  act(() => result.current.handleKeyDown(event));
+
+  expect(event.preventDefault).not.toHaveBeenCalled();
+  expect(outside).toHaveFocus();
+});
+
+test("focuses the first current-month day after a selector changes", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <select id="month"><option>January</option></select>
+    <div class="rdp-day rdp-outside"><button class="rdp-day_button">Outside</button></div>
+    <div class="rdp-day"><button class="rdp-day_button">Current month</button></div>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const monthSelector = within(picker).getByRole("combobox");
+  monthSelector.focus();
+  const preventDefault = jest.fn();
+
+  act(() => {
+    result.current.markSelectorChanged("month");
+    result.current.handleKeyDown({
+      key: "Tab",
+      shiftKey: false,
+      preventDefault,
+    } as unknown as React.KeyboardEvent<HTMLDivElement>);
+  });
+
+  expect(preventDefault).toHaveBeenCalledTimes(1);
+  expect(
+    within(picker).getByRole("button", { name: "Current month" }),
+  ).toHaveFocus();
+});
+
+test("focuses the fallback day after the year changes when no current-month day exists", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <select id="year"><option>2026</option></select>
+    <button class="rdp-day_button">Fallback</button>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  within(picker).getByRole("combobox").focus();
+
+  act(() => {
+    result.current.markSelectorChanged("year");
+    result.current.handleKeyDown(keyboardEvent("Tab"));
+  });
+
+  expect(
+    within(picker).getByRole("button", { name: "Fallback" }),
+  ).toHaveFocus();
+});
+
+test("resetChangedSelector restores the normal Tab order", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const [month, year] = within(picker).getAllByRole("combobox");
+  month.focus();
+
+  act(() => {
+    result.current.markSelectorChanged("month");
+    result.current.resetChangedSelector();
+    result.current.handleKeyDown(keyboardEvent("Tab"));
+  });
+
+  expect(year).toHaveFocus();
+});
+
+test("restores the normal Tab order after focus leaves a changed selector", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const [month, year] = within(picker).getAllByRole("combobox");
+  month.focus();
+
+  act(() => {
+    result.current.markSelectorChanged("month");
+    result.current.handleBlur({
+      target: month,
+    } as unknown as React.FocusEvent<HTMLDivElement>);
+  });
+  month.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(year).toHaveFocus();
+});
+
+test.each([
+  ["month", "Close"],
+  ["year", "Month"],
+] as const)(
+  "moves backward from a changed %s selector",
+  (changedSelector, expectedControl) => {
+    const picker = document.createElement("div");
+    picker.innerHTML = `
+      <button class="rdp-day_button">Day</button>
+      <button data-role="date-picker-close">Close</button>
+      <select id="month" aria-label="Month"><option>January</option></select>
+      <select id="year" aria-label="Year"><option>2026</option></select>
+    `;
+    const { result } = renderKeyboardNavigation(picker);
+    const selector = within(picker).getByRole("combobox", {
+      name: changedSelector === "month" ? "Month" : "Year",
+    });
+    selector.focus();
+
+    act(() => {
+      result.current.markSelectorChanged(changedSelector);
+      result.current.handleKeyDown(keyboardEvent("Tab", { shiftKey: true }));
+    });
+
+    expect(
+      within(picker).getByRole(
+        expectedControl === "Close" ? "button" : "combobox",
+        { name: expectedControl },
+      ),
+    ).toHaveFocus();
+  },
+);
+
+test("ignores non-Tab keydown events", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = '<button class="rdp-day_button">Day</button>';
+  const { result } = renderKeyboardNavigation(picker);
+  const day = within(picker).getByRole("button");
+  day.focus();
+  const event = keyboardEvent("Enter");
+
+  act(() => result.current.handleKeyDown(event));
+
+  expect(event.preventDefault).not.toHaveBeenCalled();
+  expect(day).toHaveFocus();
+});
+
+test("does not handle Tab when there is no active element", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = '<button class="rdp-day_button">Day</button>';
+  const { result } = renderKeyboardNavigation(picker);
+  const activeElement = jest
+    .spyOn(document, "activeElement", "get")
+    .mockReturnValue(null);
+  const event = keyboardEvent("Tab");
+
+  act(() => result.current.handleKeyDown(event));
+
+  expect(event.preventDefault).not.toHaveBeenCalled();
+  activeElement.mockRestore();
+});
+
+test("returns no controls while the picker ref is empty", () => {
+  const ref = { current: null } as React.RefObject<HTMLDivElement>;
+  const { result } = renderHook(() =>
+    useDatePickerKeyboardNavigation({
+      ref,
+      open: true,
+      monthSelectId: "month",
+      yearSelectId: "year",
+      onEscape: jest.fn(),
+    }),
+  );
+
+  expect(result.current.getPickerDayFocusTarget()).toBeNull();
+  expect(() =>
+    act(() => result.current.handleKeyDown(keyboardEvent("Tab"))),
+  ).not.toThrow();
+});
+
+test("clears a pending year change when the year selector blurs", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <button class="rdp-day_button">Day</button>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const year = within(picker).getAllByRole("combobox")[1];
+
+  act(() => {
+    result.current.markSelectorChanged("year");
+    result.current.handleBlur({
+      target: year,
+    } as unknown as React.FocusEvent<HTMLDivElement>);
+  });
+  year.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(within(picker).getByRole("button", { name: "Day" })).toHaveFocus();
+});
+
+test("keeps a selector change pending when a different control blurs", () => {
+  const picker = document.createElement("div");
+  picker.innerHTML = `
+    <div class="rdp-day"><button class="rdp-day_button">Day</button></div>
+    <select id="month"><option>January</option></select>
+    <select id="year"><option>2026</option></select>
+  `;
+  const { result } = renderKeyboardNavigation(picker);
+  const [month, year] = within(picker).getAllByRole("combobox");
+
+  act(() => {
+    result.current.markSelectorChanged("month");
+    result.current.handleBlur({
+      target: year,
+    } as unknown as React.FocusEvent<HTMLDivElement>);
+  });
+  month.focus();
+  act(() => result.current.handleKeyDown(keyboardEvent("Tab")));
+
+  expect(within(picker).getByRole("button", { name: "Day" })).toHaveFocus();
+});
diff --git a/src/components/date/__internal__/hooks/useDatePickerKeyboardNavigation.ts b/src/components/date/__internal__/hooks/useDatePickerKeyboardNavigation.ts
new file mode 100644
index 0000000000..6d51d1c0d9
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerKeyboardNavigation.ts
@@ -0,0 +1,230 @@
+import React, { useCallback, useRef } from "react";
+
+import Events from "../../../../__internal__/utils/helpers/events";
+
+type ChangedSelector = "month" | "year";
+
+const preferredDaySelectors = [
+  ".rdp-day_button:focus",
+  ".rdp-selected .rdp-day_button",
+  '.rdp-day_button[aria-selected="true"]',
+];
+const todayDaySelectors = [".rdp-today .rdp-day_button"];
+const allDaySelector = ".rdp-day_button";
+const currentMonthDaySelector = ".rdp-day:not(.rdp-outside) .rdp-day_button";
+const additionalFocusableSelector =
+  'button, [href], input:not([type="hidden"]), select, textarea, summary, iframe, object, embed, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), [tabindex]';
+const internalTabGuardSelector = '[data-role="date-picker-tab-guard"]';
+
+const isRenderedControl = (control: HTMLElement) => {
+  if (control.closest("[hidden], [inert]")) return false;
+
+  let element: HTMLElement | null = control;
+  while (element) {
+    const { display, visibility } = window.getComputedStyle(element);
+    if (display === "none" || visibility === "hidden") return false;
+    element = element.parentElement;
+  }
+
+  return true;
+};
+
+const isEnabledFocusableControl = (
+  control: HTMLElement | null,
+): control is HTMLElement =>
+  Boolean(
+    control &&
+      !control.matches(":disabled") &&
+      control.getAttribute("aria-disabled") !== "true" &&
+      control.tabIndex !== -1 &&
+      isRenderedControl(control),
+  );
+
+const findFirstEnabledFocusableControl = (
+  container: HTMLElement | null,
+  selectors: string[],
+) => {
+  if (!container) return null;
+
+  return (
+    selectors
+      .flatMap((selector) =>
+        Array.from(container.querySelectorAll<HTMLElement>(selector)),
+      )
+      .find(isEnabledFocusableControl) || null
+  );
+};
+
+const getAdditionalFocusableControls = (
+  container: HTMLElement | null,
+  managedControls: HTMLElement[],
+) =>
+  Array.from(
+    container?.querySelectorAll<HTMLElement>(additionalFocusableSelector) || [],
+  ).filter(
+    (control) =>
+      isEnabledFocusableControl(control) &&
+      !managedControls.includes(control) &&
+      !control.matches(allDaySelector) &&
+      !control.matches(internalTabGuardSelector),
+  );
+
+interface UseDatePickerKeyboardNavigationProps {
+  ref: React.RefObject<HTMLDivElement>;
+  open?: boolean;
+  monthSelectId: string;
+  yearSelectId: string;
+  onEscape: () => void;
+}
+
+/** Cycles Tab focus within the picker, moves focus from changed selectors to the calendar, and closes on Escape. */
+const useDatePickerKeyboardNavigation = ({
+  ref,
+  open,
+  monthSelectId,
+  yearSelectId,
+  onEscape,
+}: UseDatePickerKeyboardNavigationProps) => {
+  const changedSelectorRef = useRef<ChangedSelector | null>(null);
+
+  const getPickerDayFocusTarget = useCallback(
+    () =>
+      findFirstEnabledFocusableControl(ref.current, preferredDaySelectors) ||
+      findFirstEnabledFocusableControl(ref.current, todayDaySelectors) ||
+      findFirstEnabledFocusableControl(ref.current, [allDaySelector]),
+    [ref],
+  );
+
+  const getPickerSelectorControl = useCallback(
+    (id: string) =>
+      ref.current?.querySelector(`[id="${id}"]`) as HTMLElement | null,
+    [ref],
+  );
+
+  const getPickerCloseControl = useCallback(
+    () =>
+      ref.current?.querySelector(
+        '[data-role="date-picker-close"]',
+      ) as HTMLElement | null,
+    [ref],
+  );
+
+  const handleKeyUp = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (open && Events.isEscKey(event)) {
+        event.stopPropagation();
+        onEscape();
+      }
+    },
+    [onEscape, open],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!Events.isTabKey(event)) return;
+
+      const activeElement = document.activeElement as HTMLElement | null;
+      if (!activeElement) return;
+
+      const isDayTarget = Boolean(
+        activeElement.classList.contains("rdp-day_button") ||
+          activeElement.closest(".rdp-day_button"),
+      );
+      const monthSelector = getPickerSelectorControl(monthSelectId);
+      const yearSelector = getPickerSelectorControl(yearSelectId);
+      const closeControl = getPickerCloseControl();
+      const dayFocusTarget = getPickerDayFocusTarget();
+      // Preserve the established built-in cycle: day -> close -> month -> year.
+      // Append custom controls in their relative DOM order so adding picker
+      // content does not reorder the existing controls.
+      const managedControls = [
+        dayFocusTarget,
+        closeControl,
+        monthSelector,
+        yearSelector,
+      ].filter(isEnabledFocusableControl);
+      const focusableControls = [
+        ...managedControls,
+        ...getAdditionalFocusableControls(ref.current, managedControls),
+      ];
+      const activeControl = isDayTarget ? dayFocusTarget : activeElement;
+
+      const moveFocus = (offset: number) => {
+        if (!activeControl) return;
+
+        const activeIndex = focusableControls.indexOf(activeControl);
+        if (activeIndex === -1) return;
+
+        event.preventDefault();
+        const targetIndex =
+          (activeIndex + offset + focusableControls.length) %
+          focusableControls.length;
+        focusableControls[targetIndex].focus();
+      };
+
+      if (Events.isShiftKey(event)) {
+        changedSelectorRef.current = null;
+        moveFocus(-1);
+        return;
+      }
+
+      if (
+        (changedSelectorRef.current === "month" &&
+          activeElement === monthSelector) ||
+        (changedSelectorRef.current === "year" &&
+          activeElement === yearSelector)
+      ) {
+        changedSelectorRef.current = null;
+        const currentMonthDay = findFirstEnabledFocusableControl(ref.current, [
+          currentMonthDaySelector,
+        ]);
+        const nextDay = currentMonthDay || getPickerDayFocusTarget();
+        if (nextDay) {
+          event.preventDefault();
+          nextDay.focus();
+        } else moveFocus(1);
+      } else moveFocus(1);
+    },
+    [
+      getPickerCloseControl,
+      getPickerDayFocusTarget,
+      getPickerSelectorControl,
+      monthSelectId,
+      ref,
+      yearSelectId,
+    ],
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      const changedSelector = changedSelectorRef.current;
+      if (!changedSelector) return;
+
+      const changedSelectorId =
+        changedSelector === "month" ? monthSelectId : yearSelectId;
+      if (event.target === getPickerSelectorControl(changedSelectorId)) {
+        changedSelectorRef.current = null;
+      }
+    },
+    [getPickerSelectorControl, monthSelectId, yearSelectId],
+  );
+
+  const markSelectorChanged = useCallback((selector: ChangedSelector) => {
+    changedSelectorRef.current = selector;
+  }, []);
+
+  const resetChangedSelector = useCallback(() => {
+    changedSelectorRef.current = null;
+  }, []);
+
+  return {
+    getPickerDayFocusTarget,
+    handleBlur,
+    handleKeyDown,
+    handleKeyUp,
+    markSelectorChanged,
+    resetChangedSelector,
+  };
+};
+
+export default useDatePickerKeyboardNavigation;
diff --git a/src/components/date/__internal__/hooks/useDatePickerLocale.test.ts b/src/components/date/__internal__/hooks/useDatePickerLocale.test.ts
new file mode 100644
index 0000000000..39961fa2c2
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerLocale.test.ts
@@ -0,0 +1,66 @@
+import { renderHook } from "@testing-library/react";
+import { de, enGB, pl } from "date-fns/locale";
+
+import useLocale from "../../../../hooks/__internal__/useLocale";
+import useDatePickerLocale from "./useDatePickerLocale";
+
+jest.mock("../../../../hooks/__internal__/useLocale");
+
+const mockedUseLocale = useLocale as jest.MockedFunction<typeof useLocale>;
+
+const mockLocale = (dateFnsLocale: typeof enGB | typeof de | typeof pl) => {
+  mockedUseLocale.mockReturnValue({
+    locale: () => "en-GB",
+    date: {
+      dateFnsLocale: () => dateFnsLocale,
+      ariaLabels: {
+        closeButton: () => "Close picker",
+        chooseDate: () => "Choose a date",
+      },
+    },
+  } as ReturnType<typeof useLocale>);
+};
+
+test("provides all locale values needed by the date picker", () => {
+  mockLocale(enGB);
+
+  const { result } = renderHook(() => useDatePickerLocale());
+
+  expect(result.current.datePickerDialogAriaLabel).toBe("Choose a date");
+  expect(result.current.closeButtonLabel).toBe("Close picker");
+  expect(result.current.localize).toBe(enGB.localize);
+  expect(result.current.weekStartsOn).toBe(1);
+  expect(result.current.weekdaysLong).toEqual([
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ]);
+  expect(result.current.weekdaysShort).toEqual([
+    "Sun",
+    "Mon",
+    "Tue",
+    "Wed",
+    "Thu",
+    "Fri",
+    "Sat",
+  ]);
+  expect(mockedUseLocale).toHaveBeenCalledTimes(1);
+});
+
+test.each([
+  ["German", de, ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]],
+  ["Polish", pl, ["nie", "pon", "wto", "śro", "czw", "pią", "sob"]],
+] as const)(
+  "provides the expected short weekday labels for the %s locale",
+  (_, dateFnsLocale, expectedWeekdays) => {
+    mockLocale(dateFnsLocale);
+
+    const { result } = renderHook(() => useDatePickerLocale());
+
+    expect(result.current.weekdaysShort).toEqual(expectedWeekdays);
+  },
+);
diff --git a/src/components/date/__internal__/hooks/useDatePickerLocale.ts b/src/components/date/__internal__/hooks/useDatePickerLocale.ts
new file mode 100644
index 0000000000..922613cf57
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerLocale.ts
@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+import type { Day } from "date-fns";
+
+import useLocale from "../../../../hooks/__internal__/useLocale";
+
+/** Derives localized picker labels and weekday names. */
+const useDatePickerLocale = () => {
+  const locale = useLocale();
+  const dateFnsLocale = locale.date.dateFnsLocale();
+  const { localize, options } = dateFnsLocale;
+  const localeLanguage = dateFnsLocale.code.split("-")[0].toLowerCase();
+  const { weekdaysLong, weekdaysShort } = useMemo(() => {
+    const useWideWeekday = ["de", "pl"].includes(localeLanguage);
+
+    return {
+      weekdaysLong: Array.from({ length: 7 }, (_, index) =>
+        localize.day(index as Day),
+      ),
+      weekdaysShort: Array.from({ length: 7 }, (_, index) =>
+        localize
+          .day(index as Day, {
+            width: useWideWeekday ? "wide" : "abbreviated",
+          })
+          .substring(0, localeLanguage === "de" ? 2 : 3),
+      ),
+    };
+  }, [localeLanguage, localize]);
+
+  return {
+    datePickerDialogAriaLabel: locale.date.ariaLabels.chooseDate?.(),
+    closeButtonLabel: locale.date.ariaLabels.closeButton?.(),
+    localize,
+    weekStartsOn: options?.weekStartsOn,
+    weekdaysLong,
+    weekdaysShort,
+  };
+};
+
+export default useDatePickerLocale;
diff --git a/src/components/date/__internal__/hooks/useDatePickerMonthSync.test.ts b/src/components/date/__internal__/hooks/useDatePickerMonthSync.test.ts
new file mode 100644
index 0000000000..1f1dead7fa
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerMonthSync.test.ts
@@ -0,0 +1,161 @@
+import { renderHook } from "@testing-library/react";
+
+import useDatePickerMonthSync from "./useDatePickerMonthSync";
+
+test("updates the focused month when the selected date changes", () => {
+  const setFocusedMonth = jest.fn();
+  const initialSelectedDay = new Date(2025, 0, 10);
+  const nextSelectedDay = new Date(2025, 5, 15);
+  const { rerender } = renderHook(
+    ({ selectedDate }) =>
+      useDatePickerMonthSync({
+        open: true,
+        selectedDate,
+        focusedMonth: initialSelectedDay,
+        setFocusedMonth,
+      }),
+    { initialProps: { selectedDate: initialSelectedDay } },
+  );
+
+  setFocusedMonth.mockClear();
+  rerender({ selectedDate: nextSelectedDay });
+
+  expect(setFocusedMonth).toHaveBeenCalledTimes(1);
+  expect(setFocusedMonth).toHaveBeenCalledWith(nextSelectedDay);
+});
+
+test("resets the focused month to the selected date when the picker closes", () => {
+  const setFocusedMonth = jest.fn();
+  const selectedDate = new Date(2025, 0, 10);
+  const focusedMonth = new Date(2025, 5, 1);
+  const { rerender } = renderHook(
+    ({ open }) =>
+      useDatePickerMonthSync({
+        open,
+        selectedDate,
+        focusedMonth,
+        setFocusedMonth,
+      }),
+    { initialProps: { open: true } },
+  );
+
+  setFocusedMonth.mockClear();
+  rerender({ open: false });
+
+  expect(setFocusedMonth).toHaveBeenCalledTimes(1);
+  expect(setFocusedMonth).toHaveBeenCalledWith(selectedDate);
+});
+
+test("resets on close when the month matches but the year differs", () => {
+  const setFocusedMonth = jest.fn();
+  const selectedDate = new Date(2025, 0, 10);
+  const focusedMonth = new Date(2026, 0, 1);
+
+  renderHook(() =>
+    useDatePickerMonthSync({
+      open: false,
+      selectedDate,
+      focusedMonth,
+      setFocusedMonth,
+    }),
+  );
+
+  expect(setFocusedMonth).toHaveBeenCalledWith(selectedDate);
+});
+
+test("does not reset on close when the focused month and year already match", () => {
+  const setFocusedMonth = jest.fn();
+
+  renderHook(() =>
+    useDatePickerMonthSync({
+      open: false,
+      selectedDate: new Date(2025, 0, 10),
+      focusedMonth: new Date(2025, 0, 1),
+      setFocusedMonth,
+    }),
+  );
+
+  expect(setFocusedMonth).not.toHaveBeenCalled();
+});
+
+test("does not update the focused month when there is no selected date", () => {
+  const setFocusedMonth = jest.fn();
+
+  renderHook(() =>
+    useDatePickerMonthSync({
+      open: false,
+      focusedMonth: new Date(2025, 0, 1),
+      setFocusedMonth,
+    }),
+  );
+
+  expect(setFocusedMonth).not.toHaveBeenCalled();
+});
+
+test("updates exactly once when the selected date changes while closed", () => {
+  const setFocusedMonth = jest.fn();
+  const initialSelectedDate = new Date(2025, 0, 10, 9, 30);
+  const nextSelectedDate = new Date(2025, 5, 15, 14, 45);
+  const { rerender } = renderHook(
+    ({ selectedDate, focusedMonth }) =>
+      useDatePickerMonthSync({
+        open: false,
+        selectedDate,
+        focusedMonth,
+        setFocusedMonth,
+      }),
+    {
+      initialProps: {
+        selectedDate: initialSelectedDate,
+        focusedMonth: initialSelectedDate,
+      },
+    },
+  );
+
+  setFocusedMonth.mockClear();
+  rerender({
+    selectedDate: nextSelectedDate,
+    focusedMonth: initialSelectedDate,
+  });
+
+  expect(setFocusedMonth).toHaveBeenCalledTimes(1);
+  expect(setFocusedMonth).toHaveBeenCalledWith(nextSelectedDate);
+});
+
+test("does not update when the selected date changes within the focused month", () => {
+  const setFocusedMonth = jest.fn();
+  const focusedMonth = new Date(2025, 5, 1);
+  const { rerender } = renderHook(
+    ({ selectedDate }) =>
+      useDatePickerMonthSync({
+        open: false,
+        selectedDate,
+        focusedMonth,
+        setFocusedMonth,
+      }),
+    { initialProps: { selectedDate: new Date(2025, 5, 10) } },
+  );
+
+  rerender({ selectedDate: new Date(2025, 5, 20) });
+
+  expect(setFocusedMonth).not.toHaveBeenCalled();
+});
+
+test("does not undo month navigation while the picker is open", () => {
+  const setFocusedMonth = jest.fn();
+  const selectedDate = new Date(2025, 0, 10);
+  const { rerender } = renderHook(
+    ({ focusedMonth }) =>
+      useDatePickerMonthSync({
+        open: true,
+        selectedDate,
+        focusedMonth,
+        setFocusedMonth,
+      }),
+    { initialProps: { focusedMonth: selectedDate } },
+  );
+
+  rerender({ focusedMonth: new Date(2025, 5, 1) });
+
+  expect(setFocusedMonth).not.toHaveBeenCalled();
+});
diff --git a/src/components/date/__internal__/hooks/useDatePickerMonthSync.ts b/src/components/date/__internal__/hooks/useDatePickerMonthSync.ts
new file mode 100644
index 0000000000..30edd29734
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerMonthSync.ts
@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from "react";
+
+interface UseDatePickerMonthSyncProps {
+  open?: boolean;
+  selectedDate?: Date;
+  focusedMonth?: Date;
+  setFocusedMonth: React.Dispatch<React.SetStateAction<Date | undefined>>;
+}
+
+/** Synchronizes the displayed month with committed date changes. */
+const useDatePickerMonthSync = ({
+  open,
+  selectedDate,
+  focusedMonth,
+  setFocusedMonth,
+}: UseDatePickerMonthSyncProps) => {
+  const previousSelectedDate = useRef<number>();
+
+  // Keep the selected date's day and time when synchronizing. Consumers use the
+  // month and year for display, while preserving the complete selected value.
+  useEffect(() => {
+    const selectedDateTime = selectedDate?.getTime();
+    const selectedDateChanged =
+      previousSelectedDate.current !== selectedDateTime;
+    previousSelectedDate.current = selectedDateTime;
+
+    if (!selectedDate || (open && !selectedDateChanged)) return;
+
+    const focusedMonthMatches =
+      focusedMonth?.getMonth() === selectedDate.getMonth() &&
+      focusedMonth.getFullYear() === selectedDate.getFullYear();
+
+    if (!focusedMonthMatches) setFocusedMonth(selectedDate);
+  }, [focusedMonth, open, selectedDate, setFocusedMonth]);
+};
+
+export default useDatePickerMonthSync;
diff --git a/src/components/date/__internal__/hooks/useDatePickerMonthYearSelection.test.ts b/src/components/date/__internal__/hooks/useDatePickerMonthYearSelection.test.ts
new file mode 100644
index 0000000000..3bd0722559
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerMonthYearSelection.test.ts
@@ -0,0 +1,277 @@
+import { act, renderHook } from "@testing-library/react";
+import React from "react";
+
+import useDatePickerMonthYearSelection from "./useDatePickerMonthYearSelection";
+
+const changeEvent = (value: string) =>
+  ({ target: { value } }) as React.ChangeEvent<HTMLSelectElement>;
+
+const renderMonthYearSelection = (
+  overrides: Partial<
+    Parameters<typeof useDatePickerMonthYearSelection>[0]
+  > = {},
+) => {
+  const setFocusedMonth = jest.fn();
+  const markSelectorChanged = jest.fn();
+
+  const utils = renderHook(() =>
+    useDatePickerMonthYearSelection({
+      focusedMonth: new Date(2025, 5, 15),
+      setFocusedMonth,
+      markSelectorChanged,
+      ...overrides,
+    }),
+  );
+
+  return {
+    ...utils,
+    setFocusedMonth,
+    markSelectorChanged,
+  };
+};
+
+test("uses picker bounds to build the available years", () => {
+  const { result } = renderMonthYearSelection({
+    minDate: "2020-01-01",
+    maxDate: "2030-12-31",
+    dayPickerProps: {
+      startMonth: new Date(2023, 3, 10),
+      endMonth: new Date(2026, 8, 20),
+    },
+  });
+
+  expect(result.current.years[0]).toBe(2013);
+  expect(result.current.years.at(-1)).toBe(2036);
+});
+
+test("parses and normalizes reversed date bounds", () => {
+  const { result } = renderMonthYearSelection({
+    minDate: "2027-04-10",
+    maxDate: "2025-09-20",
+  });
+
+  expect(result.current.years[0]).toBe(2015);
+  expect(result.current.years.at(-1)).toBe(2037);
+});
+
+test.each([
+  {
+    bound: { minDate: "2200-04-10" },
+    displayedMonth: new Date(2200, 3, 10),
+    firstYear: 2190,
+    lastYear: 2210,
+  },
+  {
+    bound: { maxDate: "1900-09-20" },
+    displayedMonth: new Date(1900, 8, 20),
+    firstYear: 1890,
+    lastYear: 1910,
+  },
+])(
+  "keeps the displayed year in a distant one-sided $bound range",
+  ({ bound, displayedMonth, firstYear, lastYear }) => {
+    const { result } = renderMonthYearSelection(bound);
+
+    expect(result.current.displayedMonth).toEqual(displayedMonth);
+    expect(result.current.years[0]).toBe(firstYear);
+    expect(result.current.years.at(-1)).toBe(lastYear);
+    expect(result.current.years).toContain(displayedMonth.getFullYear());
+  },
+);
+
+test("changes month and navigates to the first of the new month", () => {
+  const { result, setFocusedMonth, markSelectorChanged } =
+    renderMonthYearSelection();
+  const event = changeEvent("1");
+
+  act(() => result.current.handleMonthChange(event));
+
+  expect(markSelectorChanged).toHaveBeenCalledWith("month");
+  expect(setFocusedMonth).toHaveBeenCalledWith(new Date(2025, 1, 1));
+});
+
+test("navigates to a boundary year without clamping the month outside its selectable range", () => {
+  const { result, setFocusedMonth, markSelectorChanged } =
+    renderMonthYearSelection({
+      minDate: "2024-04-10",
+      focusedMonth: new Date(2025, 0, 15),
+    });
+  const event = changeEvent("2024");
+
+  act(() => result.current.handleYearChange(event));
+
+  expect(markSelectorChanged).toHaveBeenCalledWith("year");
+  expect(setFocusedMonth).toHaveBeenCalledWith(new Date(2024, 0, 1));
+});
+
+test("navigates to a boundary year without clamping when using picker navigation bounds", () => {
+  const { result, setFocusedMonth } = renderMonthYearSelection({
+    dayPickerProps: { startMonth: new Date(2024, 3, 10) },
+    focusedMonth: new Date(2025, 0, 15),
+  });
+  const event = changeEvent("2024");
+
+  act(() => result.current.handleYearChange(event));
+
+  expect(setFocusedMonth).toHaveBeenCalledWith(new Date(2024, 0, 1));
+});
+
+test("navigates the focused month when there is no selected date", () => {
+  const { result, setFocusedMonth } = renderMonthYearSelection();
+
+  act(() => result.current.handleMonthChange(changeEvent("10")));
+
+  expect(setFocusedMonth).toHaveBeenCalledWith(new Date(2025, 10, 1));
+});
+
+test.each([
+  ["month", "not-a-month"],
+  ["month", ""],
+  ["month", " "],
+  ["month", "12"],
+  ["month", "1.5"],
+  ["year", "not-a-year"],
+  ["year", ""],
+  ["year", "2126"],
+] as const)("ignores invalid %s select value %p", (selector, value) => {
+  const { result, setFocusedMonth, markSelectorChanged } =
+    renderMonthYearSelection();
+
+  act(() => {
+    if (selector === "month") {
+      result.current.handleMonthChange(changeEvent(value));
+    } else {
+      result.current.handleYearChange(changeEvent(value));
+    }
+  });
+
+  expect(setFocusedMonth).not.toHaveBeenCalled();
+  expect(markSelectorChanged).not.toHaveBeenCalled();
+});
+
+test("keeps the displayed year available when initial bounds are removed", () => {
+  const setFocusedMonth = jest.fn();
+  const markSelectorChanged = jest.fn();
+  const focusedMonth = new Date(2025, 5, 15);
+  const { result, rerender } = renderHook(
+    ({ minDate }: { minDate?: string }) =>
+      useDatePickerMonthYearSelection({
+        minDate,
+        focusedMonth,
+        setFocusedMonth,
+        markSelectorChanged,
+      }),
+    { initialProps: { minDate: "2200-04-10" as string | undefined } },
+  );
+
+  rerender({ minDate: undefined });
+
+  expect(result.current.displayedMonth).toEqual(focusedMonth);
+  expect(result.current.years).toContain(focusedMonth.getFullYear());
+  expect(result.current.years[0]).toBe(2025);
+  expect(result.current.years.at(-1)).toBe(2045);
+});
+
+test("recalculates the displayed month and years when bounds change dynamically", () => {
+  const setFocusedMonth = jest.fn();
+  const markSelectorChanged = jest.fn();
+  const focusedMonth = new Date(2025, 5, 15);
+  const { result, rerender } = renderHook(
+    ({ minDate }: { minDate?: string }) =>
+      useDatePickerMonthYearSelection({
+        minDate,
+        focusedMonth,
+        setFocusedMonth,
+        markSelectorChanged,
+      }),
+    { initialProps: { minDate: undefined as string | undefined } },
+  );
+
+  rerender({ minDate: "2030-04-10" });
+
+  expect(result.current.displayedMonth).toEqual(new Date(2030, 3, 10));
+  expect(result.current.years[0]).toBe(2020);
+  expect(setFocusedMonth).not.toHaveBeenCalled();
+});
+
+test("keeps displaying a month/year the user explicitly navigated to outside minDate/maxDate", () => {
+  const setFocusedMonth = jest.fn();
+  const markSelectorChanged = jest.fn();
+  const { result, rerender } = renderHook(
+    ({ focusedMonth }: { focusedMonth?: Date }) =>
+      useDatePickerMonthYearSelection({
+        minDate: "2024-06-10",
+        maxDate: "2024-06-20",
+        focusedMonth,
+        setFocusedMonth,
+        markSelectorChanged,
+      }),
+    { initialProps: { focusedMonth: new Date(2024, 5, 15) } },
+  );
+
+  act(() => result.current.handleYearChange(changeEvent("2030")));
+
+  expect(setFocusedMonth).toHaveBeenCalledWith(new Date(2030, 5, 1));
+
+  // Simulate the resulting state update flowing back in as focusedMonth.
+  rerender({ focusedMonth: new Date(2030, 5, 1) });
+
+  expect(result.current.displayedMonth).toEqual(new Date(2030, 5, 1));
+});
+
+test("still clamps an out-of-range focusedMonth that did not come from user navigation", () => {
+  const { result } = renderMonthYearSelection({
+    minDate: "2024-06-10",
+    maxDate: "2024-06-20",
+    focusedMonth: new Date(2030, 5, 15),
+  });
+
+  expect(result.current.displayedMonth).toEqual(new Date(2024, 5, 20));
+});
+
+test("uses the default year range offset of 10 when none is provided", () => {
+  const { result } = renderMonthYearSelection({
+    focusedMonth: new Date(2025, 5, 15),
+  });
+
+  expect(result.current.years[0]).toBe(2015);
+  expect(result.current.years.at(-1)).toBe(2035);
+});
+
+test("uses a custom yearRangeOffset to build the available years", () => {
+  const { result } = renderMonthYearSelection({
+    focusedMonth: new Date(2025, 5, 15),
+    yearRangeOffset: 2,
+  });
+
+  expect(result.current.years[0]).toBe(2023);
+  expect(result.current.years.at(-1)).toBe(2027);
+});
+
+test("keeps the default year range stable after changing year", () => {
+  const setFocusedMonth = jest.fn();
+  const markSelectorChanged = jest.fn();
+  const { result } = renderHook(() => {
+    const [focusedMonth, updateFocusedMonth] = React.useState<Date | undefined>(
+      new Date(2025, 5, 15),
+    );
+
+    return useDatePickerMonthYearSelection({
+      focusedMonth,
+      setFocusedMonth: (value) => {
+        setFocusedMonth(value);
+        updateFocusedMonth(value);
+      },
+      markSelectorChanged,
+    });
+  });
+  const initialYears = result.current.years;
+
+  act(() => result.current.handleYearChange(changeEvent("2030")));
+
+  expect(setFocusedMonth).toHaveBeenCalledWith(new Date(2030, 5, 1));
+  expect(result.current.displayedMonth).toEqual(new Date(2030, 5, 1));
+  expect(result.current.years).toEqual(initialYears);
+  expect(result.current.years[0]).toBe(2015);
+  expect(result.current.years.at(-1)).toBe(2035);
+});
diff --git a/src/components/date/__internal__/hooks/useDatePickerMonthYearSelection.ts b/src/components/date/__internal__/hooks/useDatePickerMonthYearSelection.ts
new file mode 100644
index 0000000000..7029a488e0
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerMonthYearSelection.ts
@@ -0,0 +1,124 @@
+import React, { useMemo, useRef } from "react";
+
+import type { DatePickerProps } from "../date-picker";
+import {
+  buildYearRange,
+  getMonthYearTransition,
+  normalizeDateBounds,
+  parseSelectInteger,
+} from "../date-picker/date-picker.utils";
+
+export const DEFAULT_YEAR_RANGE_OFFSET = 10;
+
+interface UseDatePickerMonthYearSelectionProps {
+  minDate?: string;
+  maxDate?: string;
+  dayPickerProps?: DatePickerProps["dayPickerProps"];
+  focusedMonth?: Date;
+  setFocusedMonth: React.Dispatch<React.SetStateAction<Date | undefined>>;
+  markSelectorChanged: (selector: "month" | "year") => void;
+  /** Number of years shown either side of the bounds/anchor year in the year selector. */
+  yearRangeOffset?: number;
+}
+
+/** Manages bounded month/year navigation and selector changes. */
+const useDatePickerMonthYearSelection = ({
+  minDate,
+  maxDate,
+  dayPickerProps,
+  focusedMonth,
+  setFocusedMonth,
+  markSelectorChanged,
+  yearRangeOffset = DEFAULT_YEAR_RANGE_OFFSET,
+}: UseDatePickerMonthYearSelectionProps) => {
+  const navigationBounds = useMemo(
+    () =>
+      normalizeDateBounds({
+        minDate,
+        maxDate,
+        startMonth: dayPickerProps?.startMonth,
+        endMonth: dayPickerProps?.endMonth,
+      }),
+    [minDate, maxDate, dayPickerProps?.startMonth, dayPickerProps?.endMonth],
+  );
+  const { minMonth, maxMonth } = navigationBounds;
+  const currentMonth = focusedMonth ?? new Date();
+  // Only clamp into range when minDate/maxDate just changed (including on
+  // mount), so month/year selector navigation to an out-of-range month is
+  // never immediately overridden.
+  const previousBounds = useRef<{ min?: number; max?: number }>();
+  const boundsChanged =
+    previousBounds.current?.min !== minMonth?.getTime() ||
+    previousBounds.current?.max !== maxMonth?.getTime();
+  previousBounds.current = {
+    min: minMonth?.getTime(),
+    max: maxMonth?.getTime(),
+  };
+  const displayedMonth =
+    boundsChanged && minMonth && currentMonth < minMonth
+      ? minMonth
+      : boundsChanged && maxMonth && currentMonth > maxMonth
+        ? maxMonth
+        : currentMonth;
+  const displayedYear = displayedMonth.getFullYear();
+  // Keep an unbounded default range stable as the user navigates. Re-anchoring
+  // to each selected year would continually move the options and allow an
+  // effectively unlimited range instead of the documented +/- 100 years.
+  const initialDisplayedYear = useRef(displayedYear);
+  const years = useMemo(
+    () =>
+      buildYearRange({
+        minMonth,
+        maxMonth,
+        anchorYear: initialDisplayedYear.current,
+        includedYear: displayedYear,
+        offset: yearRangeOffset,
+      }),
+    [displayedYear, minMonth, maxMonth, yearRangeOffset],
+  );
+
+  const navigateToMonthAndYear = ({
+    month,
+    year,
+  }: {
+    month: number;
+    year: number;
+  }) => {
+    const transition = getMonthYearTransition({
+      displayedMonth,
+      month,
+      year,
+    });
+    setFocusedMonth(transition.date);
+    return transition;
+  };
+
+  const handleMonthChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const month = parseSelectInteger(event.target.value);
+    if (month === undefined || month < 0 || month > 11) return;
+
+    markSelectorChanged("month");
+    const year = displayedMonth.getFullYear();
+    navigateToMonthAndYear({ month, year });
+  };
+
+  const handleYearChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const year = parseSelectInteger(event.target.value);
+    if (year === undefined || !years.includes(year)) return;
+
+    markSelectorChanged("year");
+    navigateToMonthAndYear({
+      month: displayedMonth.getMonth(),
+      year,
+    });
+  };
+
+  return {
+    displayedMonth,
+    years,
+    handleMonthChange,
+    handleYearChange,
+  };
+};
+
+export default useDatePickerMonthYearSelection;
diff --git a/src/components/date/__internal__/hooks/useDatePickerState.test.ts b/src/components/date/__internal__/hooks/useDatePickerState.test.ts
new file mode 100644
index 0000000000..37086814a0
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerState.test.ts
@@ -0,0 +1,60 @@
+import { act, renderHook } from "@testing-library/react";
+
+import useDatePickerState from "./useDatePickerState";
+
+test("opens the picker and calls onPickerOpen", () => {
+  const onPickerOpen = jest.fn();
+  const { result } = renderHook(() => useDatePickerState({ onPickerOpen }));
+
+  act(() => result.current.openPicker());
+
+  expect(result.current.open).toBe(true);
+  expect(onPickerOpen).toHaveBeenCalledTimes(1);
+
+  act(() => result.current.openPicker());
+  expect(onPickerOpen).toHaveBeenCalledTimes(1);
+});
+
+test("closes the picker and calls onPickerClose", () => {
+  const onPickerClose = jest.fn();
+  const { result } = renderHook(() => useDatePickerState({ onPickerClose }));
+
+  act(() => result.current.setOpen(true));
+  act(() => result.current.closePicker());
+
+  expect(result.current.open).toBe(false);
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+
+  act(() => result.current.closePicker());
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+});
+
+test("toggles the picker and calls the matching callback", () => {
+  const onPickerOpen = jest.fn();
+  const onPickerClose = jest.fn();
+  const { result } = renderHook(() =>
+    useDatePickerState({ onPickerOpen, onPickerClose }),
+  );
+
+  act(() => result.current.togglePicker());
+  expect(result.current.open).toBe(true);
+  expect(onPickerOpen).toHaveBeenCalledTimes(1);
+
+  act(() => result.current.togglePicker());
+  expect(result.current.open).toBe(false);
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+});
+
+test("supports state updates without firing lifecycle callbacks", () => {
+  const onPickerOpen = jest.fn();
+  const onPickerClose = jest.fn();
+  const { result } = renderHook(() =>
+    useDatePickerState({ onPickerOpen, onPickerClose }),
+  );
+
+  act(() => result.current.setOpen((isOpen) => !isOpen));
+
+  expect(result.current.open).toBe(true);
+  expect(onPickerOpen).not.toHaveBeenCalled();
+  expect(onPickerClose).not.toHaveBeenCalled();
+});
diff --git a/src/components/date/__internal__/hooks/useDatePickerState.ts b/src/components/date/__internal__/hooks/useDatePickerState.ts
new file mode 100644
index 0000000000..bc1bcdb0f1
--- /dev/null
+++ b/src/components/date/__internal__/hooks/useDatePickerState.ts
@@ -0,0 +1,50 @@
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+
+export interface UseDatePickerStateProps {
+  onPickerOpen?: () => void;
+  onPickerClose?: () => void;
+}
+
+export interface UseDatePickerStateReturn {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  openPicker: () => void;
+  closePicker: () => void;
+  togglePicker: () => void;
+}
+
+/** Owns picker visibility and emits lifecycle callbacks on transitions. */
+const useDatePickerState = ({
+  onPickerOpen,
+  onPickerClose,
+}: UseDatePickerStateProps): UseDatePickerStateReturn => {
+  const [open, setOpen] = useState(false);
+
+  const openPicker = useCallback(() => {
+    if (open) return;
+
+    setOpen(true);
+    onPickerOpen?.();
+  }, [onPickerOpen, open]);
+
+  const closePicker = useCallback(() => {
+    if (!open) return;
+
+    setOpen(false);
+    onPickerClose?.();
+  }, [onPickerClose, open]);
+
+  const togglePicker = useCallback(() => {
+    if (open) {
+      setOpen(false);
+      onPickerClose?.();
+    } else {
+      setOpen(true);
+      onPickerOpen?.();
+    }
+  }, [onPickerClose, onPickerOpen, open]);
+
+  return { open, setOpen, openPicker, closePicker, togglePicker };
+};
+
+export default useDatePickerState;
diff --git a/src/components/date/__internal__/navbar/button.style.ts b/src/components/date/__internal__/navbar/button.style.ts
deleted file mode 100644
index d281887593..0000000000
--- a/src/components/date/__internal__/navbar/button.style.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from "styled-components";
-import addFocusStyling from "../../../../style/utils/add-focus-styling";
-import applyBaseTheme from "../../../../style/themes/apply-base-theme";
-
-const StyledButton = styled.button
-  .attrs(applyBaseTheme)
-  .attrs({ type: "button" })`
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  border: var(--borderWidth200) solid var(--colorsActionMinorTransparent);
-  background: none;
-  box-shadow: none;
-  cursor: pointer;
-  height: var(--sizing500);
-  width: var(--sizing500);
-  padding: var(--spacing150);
-  box-sizing: border-box;
-  border-radius: var(--borderRadius050);
-
-  &:focus {
-    ${addFocusStyling()}
-  }
-`;
-
-export default StyledButton;
diff --git a/src/components/date/__internal__/navbar/index.ts b/src/components/date/__internal__/navbar/index.ts
deleted file mode 100644
index 0ee9250975..0000000000
--- a/src/components/date/__internal__/navbar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./navbar.component";
-export type { NavbarProps } from "./navbar.component";
diff --git a/src/components/date/__internal__/navbar/navbar.component.tsx b/src/components/date/__internal__/navbar/navbar.component.tsx
deleted file mode 100644
index 9a7561a928..0000000000
--- a/src/components/date/__internal__/navbar/navbar.component.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from "react";
-import { NavProps } from "react-day-picker";
-
-import StyledButton from "./button.style";
-import StyledNavbar from "./navbar.style";
-import Icon from "../../../icon";
-import Events from "../../../../__internal__/utils/helpers/events";
-import useLocale from "../../../../hooks/__internal__/useLocale";
-
-export interface NavbarProps {
-  onPreviousClick?: () => void;
-  onNextClick?: () => void;
-  className?: string;
-}
-
-export const Navbar = ({
-  onPreviousClick,
-  onNextClick,
-  className,
-}: NavProps) => {
-  const locale = useLocale();
-  const { previousMonthButton, nextMonthButton } = locale.date.ariaLabels;
-
-  const handleKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (
-      Events.isLeftKey(ev) ||
-      Events.isRightKey(ev) ||
-      Events.isUpKey(ev) ||
-      Events.isDownKey(ev)
-    ) {
-      ev.stopPropagation();
-      ev.preventDefault();
-    }
-  };
-
-  return (
-    <StyledNavbar className={className} data-role="date-navbar">
-      <StyledButton
-        aria-label={previousMonthButton()}
-        onClick={(e) => {
-          onPreviousClick?.(e);
-        }}
-        onKeyDown={handleKeyDown}
-      >
-        <Icon type="chevron_left" />
-      </StyledButton>
-      <StyledButton
-        aria-label={nextMonthButton()}
-        onClick={(e) => onNextClick?.(e)}
-        onKeyDown={handleKeyDown}
-      >
-        <Icon type="chevron_right" />
-      </StyledButton>
-    </StyledNavbar>
-  );
-};
-
-export default Navbar;
diff --git a/src/components/date/__internal__/navbar/navbar.style.ts b/src/components/date/__internal__/navbar/navbar.style.ts
deleted file mode 100644
index e6bed9d55c..0000000000
--- a/src/components/date/__internal__/navbar/navbar.style.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from "styled-components";
-
-const StyledNavbar = styled.div`
-  &.rdp-nav {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    top: 0;
-    height: var(--sizing500);
-  }
-`;
-
-export default StyledNavbar;
diff --git a/src/components/date/__internal__/navbar/navbar.test.tsx b/src/components/date/__internal__/navbar/navbar.test.tsx
deleted file mode 100644
index 6679982d04..0000000000
--- a/src/components/date/__internal__/navbar/navbar.test.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import React from "react";
-import { screen, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import Navbar from "./navbar.component";
-
-test("should call `onPreviousClick` when the user clicks the previous button", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  const onNextClick = jest.fn();
-  render(
-    <Navbar
-      onPreviousClick={onPreviousClick}
-      onNextClick={onNextClick}
-      className="custom-class"
-    />,
-  );
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  await user.click(prevButton);
-
-  expect(onPreviousClick).toHaveBeenCalledTimes(1);
-});
-
-test("should call `onNextClick` when the user clicks the next button", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  const onNextClick = jest.fn();
-  render(
-    <Navbar
-      onPreviousClick={onPreviousClick}
-      onNextClick={onNextClick}
-      className="custom-class"
-    />,
-  );
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  await user.click(nextButton);
-
-  expect(onNextClick).toHaveBeenCalledTimes(1);
-});
-
-test("should apply the custom class passed via `className` prop", () => {
-  render(
-    <Navbar
-      onPreviousClick={jest.fn()}
-      onNextClick={jest.fn()}
-      className="custom-class"
-    />,
-  );
-
-  expect(screen.getByTestId("date-navbar")).toHaveClass("custom-class");
-});
-
-test("should apply the expected aria-labels to the button controls", () => {
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-
-  expect(prevButton).toHaveAttribute("aria-label", "Previous month");
-  expect(nextButton).toHaveAttribute("aria-label", "Next month");
-});
-
-test("should not change the current month when 'arrowdown' key is pressed and previous button is focused", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  render(<Navbar onPreviousClick={onPreviousClick} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  prevButton.focus();
-  await user.keyboard("{arrowdown}");
-
-  expect(onPreviousClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowup' key is pressed and previous button is focused", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  render(<Navbar onPreviousClick={onPreviousClick} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  prevButton.focus();
-  await user.keyboard("{arrowup}");
-
-  expect(onPreviousClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowleft' key is pressed and previous button is focused", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  render(<Navbar onPreviousClick={onPreviousClick} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  prevButton.focus();
-  await user.keyboard("{arrowleft}");
-
-  expect(onPreviousClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowright' key is pressed and previous button is focused", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  render(<Navbar onPreviousClick={onPreviousClick} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  prevButton.focus();
-  await user.keyboard("{arrowright}");
-
-  expect(onPreviousClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowdown' key is pressed and next button is focused", async () => {
-  const user = userEvent.setup();
-  const onNextClick = jest.fn();
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={onNextClick} />);
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  nextButton.focus();
-  await user.keyboard("{arrowdown}");
-
-  expect(onNextClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowup' key is pressed and next button is focused", async () => {
-  const user = userEvent.setup();
-  const onNextClick = jest.fn();
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={onNextClick} />);
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  nextButton.focus();
-  await user.keyboard("{arrowup}");
-
-  expect(onNextClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowleft' key is pressed and next button is focused", async () => {
-  const user = userEvent.setup();
-  const onNextClick = jest.fn();
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={onNextClick} />);
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  nextButton.focus();
-  await user.keyboard("{arrowleft}");
-
-  expect(onNextClick).not.toHaveBeenCalled();
-});
-
-test("should not change the current month when 'arrowright' key is pressed and next button is focused", async () => {
-  const user = userEvent.setup();
-  const onNextClick = jest.fn();
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={onNextClick} />);
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  nextButton.focus();
-  await user.keyboard("{arrowright}");
-
-  expect(onNextClick).not.toHaveBeenCalled();
-});
-
-test("should change the current month when 'Enter' key is pressed and previous button is focused", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-
-  render(<Navbar onPreviousClick={onPreviousClick} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  prevButton.focus();
-  await user.keyboard("{Enter}");
-
-  expect(onPreviousClick).toHaveBeenCalled();
-});
-
-test("should change the current month when ' ' (Space) key is pressed and previous button is focused", async () => {
-  const user = userEvent.setup();
-  const onPreviousClick = jest.fn();
-  render(<Navbar onPreviousClick={onPreviousClick} onNextClick={jest.fn()} />);
-  const prevButton = screen.getByRole("button", { name: "Previous month" });
-  prevButton.focus();
-  await user.keyboard(" ");
-
-  expect(onPreviousClick).toHaveBeenCalled();
-});
-
-test("should change the current month when 'Enter' key is pressed and next button is focused", async () => {
-  const user = userEvent.setup();
-  const onNextClick = jest.fn();
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={onNextClick} />);
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  nextButton.focus();
-  await user.keyboard("{Enter}");
-
-  expect(onNextClick).toHaveBeenCalled();
-});
-
-test("should change the current month when Space key is pressed and next button is focused", async () => {
-  const user = userEvent.setup();
-  const onNextClick = jest.fn();
-  render(<Navbar onPreviousClick={jest.fn()} onNextClick={onNextClick} />);
-  const nextButton = screen.getByRole("button", { name: "Next month" });
-  nextButton.focus();
-  await user.keyboard(" ");
-
-  expect(onNextClick).toHaveBeenCalled();
-});
diff --git a/src/components/date/__internal__/utils/date-input-value.invalid.test.ts b/src/components/date/__internal__/utils/date-input-value.invalid.test.ts
new file mode 100644
index 0000000000..1d1bce53df
--- /dev/null
+++ b/src/components/date/__internal__/utils/date-input-value.invalid.test.ts
@@ -0,0 +1,11 @@
+jest.mock("./utils", () => ({
+  ...jest.requireActual("./utils"),
+  findMatchedFormatAndValue: () => ["dd/MM/yyyy", "31/02/2019"],
+  parseDate: () => new Date(Number.NaN),
+}));
+
+import { getSelectedDate } from "./date-input-value.utils";
+
+test("rejects a matched date when parsing produces an invalid date", () => {
+  expect(getSelectedDate("31/02/2019", ["dd/MM/yyyy"], false)).toBeUndefined();
+});
diff --git a/src/components/date/__internal__/utils/date-input-value.utils.test.ts b/src/components/date/__internal__/utils/date-input-value.utils.test.ts
new file mode 100644
index 0000000000..e751c3e818
--- /dev/null
+++ b/src/components/date/__internal__/utils/date-input-value.utils.test.ts
@@ -0,0 +1,181 @@
+import getFormatData from "../date-formats";
+import { enGB } from "date-fns/locale";
+
+import {
+  buildDateChangeEvent,
+  getDisplayValue,
+  getInitialSelectedDate,
+  getSelectedDate,
+} from "./date-input-value.utils";
+
+const { format, formats } = getFormatData(enGB);
+const inputId = "date-input";
+const inputName = "date";
+const selectedDate = new Date(2019, 2, 16);
+
+test.each(["16/03/2019", "2019-03-16"])(
+  "gets the initial selected date from %s",
+  (value) => {
+    expect(getInitialSelectedDate(value, enGB, format)).toEqual(selectedDate);
+  },
+);
+
+test("does not get an initial selected date from invalid input", () => {
+  expect(getInitialSelectedDate("invalid", enGB, format)).toBeUndefined();
+});
+
+test("rejects an invalid date that matches a supported format", () => {
+  expect(getSelectedDate("31/02/2019", formats, true)).toBeUndefined();
+});
+
+test.each(["16/03/2019", "2019-03-16"])(
+  "gets the selected date from %s while pristine",
+  (value) => {
+    expect(getSelectedDate(value, formats, true)).toEqual(selectedDate);
+  },
+);
+
+test.each([
+  ["invalid", true],
+  ["2019-03-16", false],
+] as const)(
+  "does not get a selected date from %s when pristine is %s",
+  (value, shouldParseISOValue) => {
+    expect(
+      getSelectedDate(value, formats, shouldParseISOValue),
+    ).toBeUndefined();
+  },
+);
+
+test.each([
+  ["2019-03-16", "16/03/2019"],
+  ["16.03.2019", "16/03/2019"],
+] as const)("normalizes pristine input %s", (value, expectedValue) => {
+  expect(getDisplayValue(value, format, formats, true)).toBe(expectedValue);
+});
+
+test.each(["2019-03-16", "16.03.2019"])(
+  "does not normalize edited input %s",
+  (value) => {
+    expect(getDisplayValue(value, format, formats, false)).toBe(value);
+  },
+);
+
+test("does not normalize invalid pristine input", () => {
+  expect(getDisplayValue("invalid", format, formats, true)).toBe("invalid");
+});
+
+test("builds an event for valid input", () => {
+  expect(
+    buildDateChangeEvent({
+      event: {
+        type: "change",
+        target: {
+          id: inputId,
+          name: inputName,
+          value: "16/03/2019",
+        },
+      },
+      format,
+      formats,
+    }),
+  ).toEqual({
+    target: {
+      id: inputId,
+      name: inputName,
+      value: {
+        formattedValue: "16/03/2019",
+        rawValue: "2019-03-16",
+      },
+    },
+  });
+});
+
+test.each(["change", "click"] as const)(
+  "preserves the input display value for a %s event",
+  (type) => {
+    expect(
+      buildDateChangeEvent({
+        event: { type, target: { value: "16.03.2019" } },
+        format,
+        formats,
+        selectedDate,
+      }).target.value.formattedValue,
+    ).toBe("16.03.2019");
+  },
+);
+
+test("uses the selected date as the display value on blur", () => {
+  expect(
+    buildDateChangeEvent({
+      event: { type: "blur", target: { value: "16.03.2019" } },
+      format,
+      formats,
+      selectedDate,
+    }).target.value,
+  ).toEqual({
+    formattedValue: "16/03/2019",
+    rawValue: "2019-03-16",
+  });
+});
+
+test.each([
+  [true, ""],
+  [false, null],
+] as const)(
+  "handles empty input when allowEmptyValue is %s",
+  (allowEmptyValue, expectedRawValue) => {
+    expect(
+      buildDateChangeEvent({
+        allowEmptyValue,
+        event: { type: "change", target: { value: "" } },
+        format,
+        formats,
+      }).target.value.rawValue,
+    ).toBe(expectedRawValue);
+  },
+);
+
+test("omits id and name when they are not provided", () => {
+  expect(
+    buildDateChangeEvent({
+      event: { type: "change", target: { value: "invalid" } },
+      format,
+      formats,
+    }).target,
+  ).toEqual({
+    value: { formattedValue: "invalid", rawValue: null },
+  });
+});
+
+test("preserves invalid input on blur when there is no selected date", () => {
+  expect(
+    buildDateChangeEvent({
+      event: {
+        type: "blur",
+        target: { id: inputId, value: "invalid" },
+      },
+      format,
+      formats,
+    }),
+  ).toEqual({
+    target: {
+      id: inputId,
+      value: { formattedValue: "invalid", rawValue: null },
+    },
+  });
+});
+
+test("uses the selected date on blur while retaining an invalid raw value", () => {
+  expect(
+    buildDateChangeEvent({
+      event: { type: "blur", target: { value: "invalid" } },
+      format,
+      formats,
+      selectedDate,
+    }).target.value,
+  ).toEqual({
+    formattedValue: "16/03/2019",
+    rawValue: null,
+  });
+});
diff --git a/src/components/date/__internal__/utils/date-input-value.utils.ts b/src/components/date/__internal__/utils/date-input-value.utils.ts
new file mode 100644
index 0000000000..b8080e3fbc
--- /dev/null
+++ b/src/components/date/__internal__/utils/date-input-value.utils.ts
@@ -0,0 +1,178 @@
+import type { Locale } from "react-day-picker";
+
+import {
+  additionalYears,
+  checkISOFormatAndLength,
+  findMatchedFormatAndValue,
+  formatToISO,
+  formattedValue,
+  getSeparator,
+  isDateValid,
+  isValidLocaleDate,
+  parseDate,
+  parseISODate,
+} from "./utils";
+
+export interface DateInputEvent {
+  type: "blur" | "change" | "click";
+  target: {
+    id?: string;
+    name?: string;
+    value: string;
+  };
+}
+
+interface BuildDateChangeEventOptions {
+  allowEmptyValue?: boolean;
+  event: DateInputEvent;
+  format: string;
+  formats: string[];
+  selectedDate?: Date;
+}
+
+const getMatchedDate = (value: string, formats: string[]) => {
+  const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
+    value,
+    formats,
+  );
+
+  if (!matchedFormat || !matchedValue) {
+    return {
+      date: undefined,
+      normalizedFormat: "",
+      normalizedValue: "",
+    };
+  }
+
+  const [normalizedFormat, normalizedValue] = additionalYears(
+    matchedFormat,
+    matchedValue,
+  );
+  const date = parseDate(normalizedFormat, normalizedValue);
+
+  return {
+    date: isDateValid(date) ? date : undefined,
+    normalizedFormat,
+    normalizedValue,
+  };
+};
+
+export const getInitialSelectedDate = (
+  value: string,
+  dateFnsLocale: Locale,
+  format: string,
+) => {
+  if (checkISOFormatAndLength(value)) {
+    return parseISODate(value);
+  }
+
+  if (!isValidLocaleDate(value, dateFnsLocale)) {
+    return undefined;
+  }
+
+  return parseDate(format, value);
+};
+
+export const getSelectedDate = (
+  value: string,
+  formats: string[],
+  shouldParseISOValue: boolean,
+) => {
+  const { date } = getMatchedDate(value, formats);
+
+  if (date) {
+    return date;
+  }
+
+  if (checkISOFormatAndLength(value) && shouldParseISOValue) {
+    return parseISODate(value);
+  }
+
+  return undefined;
+};
+
+export const getDisplayValue = (
+  value: string,
+  format: string,
+  formats: string[],
+  shouldFormatValue: boolean,
+) => {
+  if (checkISOFormatAndLength(value) && shouldFormatValue) {
+    return formattedValue(format, parseISODate(value));
+  }
+
+  const valueSeparator = getSeparator(value);
+  const formatSeparator = getSeparator(format);
+  const valueWithFormatSeparators = value
+    .split("")
+    .map((char) => (char === valueSeparator ? formatSeparator : char))
+    .join("");
+
+  if (
+    shouldFormatValue &&
+    valueSeparator !== formatSeparator &&
+    isDateValid(parseDate(format, valueWithFormatSeparators))
+  ) {
+    const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
+      valueWithFormatSeparators,
+      formats,
+    );
+
+    return formattedValue(
+      format,
+      parseDate(...additionalYears(matchedFormat, matchedValue)),
+    );
+  }
+
+  return value;
+};
+
+export const getDateInputState = (
+  value: string,
+  format: string,
+  formats: string[],
+  shouldFormatValue: boolean,
+) => ({
+  displayValue: getDisplayValue(value, format, formats, shouldFormatValue),
+  selectedDate: getSelectedDate(value, formats, shouldFormatValue),
+});
+
+const getRawValueForInvalidInput = (
+  inputValue: string,
+  allowEmptyValue?: boolean,
+) => (allowEmptyValue && !inputValue.length ? inputValue : null);
+
+export const buildDateChangeEvent = ({
+  allowEmptyValue,
+  event,
+  format,
+  formats,
+  selectedDate,
+}: BuildDateChangeEventOptions) => {
+  const {
+    type,
+    target: { id, name, value: inputValue },
+  } = event;
+  const { date, normalizedFormat, normalizedValue } = getMatchedDate(
+    inputValue,
+    formats,
+  );
+  const formattedValueString =
+    type === "blur" && isDateValid(selectedDate)
+      ? formattedValue(format, selectedDate)
+      : inputValue;
+  const rawValue = date
+    ? formatToISO(normalizedFormat, normalizedValue)
+    : getRawValueForInvalidInput(inputValue, allowEmptyValue);
+
+  return {
+    target: {
+      ...(name && { name }),
+      ...(id && { id }),
+      value: {
+        formattedValue: formattedValueString,
+        rawValue,
+      },
+    },
+  };
+};
diff --git a/src/components/date/__internal__/utils.test.ts b/src/components/date/__internal__/utils/utils.test.ts
similarity index 98%
rename from src/components/date/__internal__/utils.test.ts
rename to src/components/date/__internal__/utils/utils.test.ts
index 20e8a12ee3..3bd6f4031d 100644
--- a/src/components/date/__internal__/utils.test.ts
+++ b/src/components/date/__internal__/utils/utils.test.ts
@@ -327,7 +327,7 @@ test.each([
   ["ddMyy", "28222", "dd M yy", "28 2 22"],
 ])(
   "should return the expected [%s, %s] when `findMatchedFormatAndValue` is passed the un-separated %s format and %s value",
-  (format, value, formatResult, valueResult) => {
+  (_format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
       formats,
@@ -352,7 +352,7 @@ test.each([
   ["dd/M/yyyy", "28/2/2022", "dd/M/yyyy", "28/2/2022"],
 ])(
   "should match the `/` separated %s format and %s value and return the expected [%s, %s]",
-  (format, value, formatResult, valueResult) => {
+  (_format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
       formats,
@@ -373,7 +373,7 @@ test.each([
   ["d,MM,yyyy", "1,01,2022", "d,MM,yyyy", "1,01,2022"],
 ])(
   "should return the expected [%s, %s] when `findMatchedFormatAndValue` passed the `,` separated %s format and %s value",
-  (format, value, formatResult, valueResult) => {
+  (_format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
       formats,
@@ -394,7 +394,7 @@ test.each([
   ["d-MM-yyyy", "1-01-2022", "d-MM-yyyy", "1-01-2022"],
 ])(
   "should return the expected [%s, %s] when `findMatchedFormatAndValue` passed the `-` separated %s format and %s value and return the expected [%s, %s]",
-  (format, value, formatResult, valueResult) => {
+  (_format, value, formatResult, valueResult) => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
       value,
       formats,
diff --git a/src/components/date/__internal__/utils.ts b/src/components/date/__internal__/utils/utils.ts
similarity index 99%
rename from src/components/date/__internal__/utils.ts
rename to src/components/date/__internal__/utils/utils.ts
index 25143f550e..08058754e8 100644
--- a/src/components/date/__internal__/utils.ts
+++ b/src/components/date/__internal__/utils/utils.ts
@@ -8,7 +8,7 @@ import {
   parse,
   parseISO,
   parseWithOptions,
-} from "./date-fns-fp";
+} from "../date-fns-fp";
 
 const DATE_STRING_LENGTH = 10;
 const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
diff --git a/src/components/date/__internal__/weekday/abbr.style.ts b/src/components/date/__internal__/weekday/abbr.style.ts
deleted file mode 100644
index 11f184c9b9..0000000000
--- a/src/components/date/__internal__/weekday/abbr.style.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-const StyledAbbr = styled.abbr`
-  text-decoration: none;
-`;
-
-export default StyledAbbr;
diff --git a/src/components/date/__internal__/weekday/index.ts b/src/components/date/__internal__/weekday/index.ts
deleted file mode 100644
index c47745da59..0000000000
--- a/src/components/date/__internal__/weekday/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./weekday.component";
-export type { WeekdayProps } from "./weekday.component";
diff --git a/src/components/date/__internal__/weekday/weekday.component.tsx b/src/components/date/__internal__/weekday/weekday.component.tsx
deleted file mode 100644
index 3bc0a70784..0000000000
--- a/src/components/date/__internal__/weekday/weekday.component.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import StyledWeekday from "./weekday.style";
-import StyledAbbr from "./abbr.style";
-
-export interface WeekdayProps {
-  className?: string;
-  title?: string;
-  children?: React.ReactNode;
-}
-
-export const Weekday = ({
-  className,
-  title,
-  children,
-  ...props
-}: WeekdayProps) => (
-  <StyledWeekday className={className} role="columnheader" {...props}>
-    <StyledAbbr title={title}>{children}</StyledAbbr>
-  </StyledWeekday>
-);
-
-export default Weekday;
diff --git a/src/components/date/__internal__/weekday/weekday.style.ts b/src/components/date/__internal__/weekday/weekday.style.ts
deleted file mode 100644
index 4d616f01c6..0000000000
--- a/src/components/date/__internal__/weekday/weekday.style.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from "styled-components";
-
-import StyledAbbr from "./abbr.style";
-
-const StyledWeekday = styled.th`
-  &,
-  & ${StyledAbbr} {
-    border: none;
-    height: var(--sizing500);
-    min-width: var(--sizing500);
-    font-weight: 800;
-    color: var(--colorsActionMinor500);
-    text-transform: uppercase;
-    font-size: 12px;
-    //font: var(--typographyDatePickerCalendarDayM); font assets to be updated part of FE-4975
-    text-align: center;
-    padding: 20px 0 5px;
-    box-sizing: border-box;
-  }
-`;
-
-export default StyledWeekday;
diff --git a/src/components/date/__internal__/weekday/weekday.test.tsx b/src/components/date/__internal__/weekday/weekday.test.tsx
deleted file mode 100644
index e31d9bae13..0000000000
--- a/src/components/date/__internal__/weekday/weekday.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { screen, render } from "@testing-library/react";
-
-import Weekday from "./weekday.component";
-
-const Component = (props: {
-  children: React.ReactNode;
-  className?: string;
-  title?: string;
-}) => (
-  <table>
-    <thead>
-      <tr>
-        <Weekday {...props}>Foo</Weekday>
-      </tr>
-    </thead>
-  </table>
-);
-
-test("should render the passed `title` as the attribute on the `abbr` element", () => {
-  render(<Component title="title">Foo</Component>);
-  const abbr = screen.getByTitle("title");
-
-  expect(abbr).toBeInTheDocument();
-  expect(abbr.tagName).toBe("ABBR");
-});
-
-test("should render the passed `className` on the `div` element", () => {
-  render(<Component className="custom-class">Foo</Component>);
-  const weekday = screen.getByRole("columnheader", { name: "Foo" });
-
-  expect(weekday).toHaveClass("custom-class");
-});
diff --git a/src/components/date/components.test-pw.tsx b/src/components/date/components.test-pw.tsx
index fabcf80347..4d5142cbfa 100644
--- a/src/components/date/components.test-pw.tsx
+++ b/src/components/date/components.test-pw.tsx
@@ -4,7 +4,7 @@ import { CommonTextboxArgs } from "../textbox/utils";
 import CarbonProvider from "../carbon-provider/carbon-provider.component";
 import Dialog from "../dialog";
 
-export const DateInputCustom = ({
+export const DateInputLegacyControlled = ({
   onChange,
   onBlur,
   value,
@@ -33,12 +33,48 @@ export const DateInputCustom = ({
       value={state}
       onChange={handleOnChange}
       onBlur={handleOnBlur}
+      variant="legacy"
       {...props}
     />
   );
 };
 
-export const DateInputValidationNewDesign = () => {
+export const DateInputTypicalControlled = ({
+  onChange,
+  onBlur,
+  value,
+  ...props
+}: Partial<CommonTextboxArgs> & Partial<DateInputProps>) => {
+  const [state, setState] = React.useState(value ?? "01/05/2022");
+
+  const handleOnChange = (ev: DateChangeEvent) => {
+    if (onChange) {
+      onChange(ev);
+    }
+
+    setState(ev.target.value.formattedValue);
+  };
+
+  const handleOnBlur = (ev: DateChangeEvent) => {
+    if (onBlur) {
+      onBlur(ev);
+    }
+  };
+
+  return (
+    <DateInput
+      label="Date"
+      name="date-input"
+      value={state}
+      onChange={handleOnChange}
+      onBlur={handleOnBlur}
+      variant="typical"
+      {...props}
+    />
+  );
+};
+
+export const DateInputValidationStates = () => {
   const [state1, setState1] = React.useState("01/10/2016");
   const setValue1 = ({ target }: DateChangeEvent) => {
     setState1(target.value.formattedValue);
@@ -63,6 +99,7 @@ export const DateInputValidationNewDesign = () => {
               size={size}
               {...{ [validationType]: "Message" }}
               m={4}
+              variant="legacy"
             />
             <DateInput
               label={`readOnly - ${size} - ${validationType}`}
@@ -73,6 +110,7 @@ export const DateInputValidationNewDesign = () => {
               readOnly
               {...{ [validationType]: "Message" }}
               m={4}
+              variant="legacy"
             />
           </div>
         )),
@@ -81,7 +119,7 @@ export const DateInputValidationNewDesign = () => {
   );
 };
 
-export const WithSiblingButton = ({
+export const DateInputWithNextFocusableElement = ({
   onChange,
   onBlur,
   value,
@@ -113,6 +151,7 @@ export const WithSiblingButton = ({
         value={state}
         onChange={handleOnChange}
         onBlur={handleOnBlur}
+        variant="legacy"
         {...props}
       />
       <button data-element="foo-button" type="button">
@@ -155,6 +194,7 @@ export const DateInputInsideDialog = ({
         value={state}
         onChange={handleOnChange}
         onBlur={handleOnBlur}
+        variant="legacy"
         {...props}
       />
     </Dialog>
diff --git a/src/components/date/date-interaction.stories.tsx b/src/components/date/date-interaction.stories.tsx
index 54cd44872a..e3c0f6c1d3 100644
--- a/src/components/date/date-interaction.stories.tsx
+++ b/src/components/date/date-interaction.stories.tsx
@@ -1,102 +1,65 @@
 import React, { useState } from "react";
 
 import { StoryObj } from "@storybook/react-vite";
-import { userEvent, within } from "storybook/test";
+import { format, startOfDay, subDays } from "date-fns";
+import { expect, userEvent, within } from "storybook/test";
 
 import DateInput from "./date.component";
 
 import { allowInteractions } from "../../../.storybook/interaction-toggle/reduced-motion";
 import DefaultDecorator from "../../../.storybook/utils/default-decorator";
 
-import I18nProvider from "../i18n-provider";
-import { de as deLocale } from "date-fns/locale/de";
-import { enUS as enUSLocale } from "date-fns/locale/en-US";
-
-import Box from "../box";
-
 type Story = StoryObj<typeof DateInput>;
 
-export default {
-  title: "Date Input/Interactions",
-  parameters: {
-    themeProvider: { chromatic: { theme: "sage" } },
-  },
-};
+const initialDate = subDays(startOfDay(new Date()), 1);
+const initialDateValue = format(initialDate, "dd/MM/yyyy");
+const initialDateLabel = format(initialDate, "EEEE, MMMM do, yyyy");
+const initialDateName = new RegExp(`^${initialDateLabel}`);
 
-export const MonthYearNavigation: Story = {
-  render: () => (
-    <DateInput
-      label="Date"
-      name="date-input"
-      value="04/04/2019"
-      onChange={() => {}}
-    />
-  ),
-  play: async ({ canvasElement }) => {
-    if (!allowInteractions()) {
-      return;
-    }
-    const canvas = within(canvasElement);
-    const calendarIcon = canvas.getByTestId("icon");
-    await userEvent.click(calendarIcon);
-    const navigationIcon = canvas.getByRole("button", { name: "Next month" });
-    await userEvent.click(navigationIcon);
-  },
-  decorators: [
-    (StoryToRender) => (
-      <DefaultDecorator>
-        <StoryToRender />
-      </DefaultDecorator>
-    ),
-  ],
-};
-MonthYearNavigation.storyName = "Month/Year Navigation";
+interface NavigationExampleProps {
+  variant: "legacy" | "typical";
+  label: string;
+  name: string;
+}
 
-const DateInputWithTyping = () => {
-  const [date, setDate] = useState("04/04/2019");
+const NavigationExample = ({
+  variant,
+  label,
+  name,
+}: NavigationExampleProps) => {
+  const [date, setDate] = useState(initialDateValue);
 
   return (
     <DateInput
-      label="Date"
-      name="date-input"
+      variant={variant}
+      label={label}
+      name={name}
       value={date}
-      onChange={(e) => setDate(e.target.value.formattedValue)}
+      onChange={(event) => setDate(event.target.value.formattedValue)}
     />
   );
 };
 
-export const DateTyping: Story = {
-  render: () => <DateInputWithTyping />,
-  play: async ({ canvasElement }) => {
-    if (!allowInteractions()) {
-      return;
-    }
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole("textbox");
-    await userEvent.click(input);
-    await userEvent.keyboard("05/12/2024");
-    const calendarIcon = canvas.getByTestId("icon");
-    await userEvent.click(calendarIcon);
+export default {
+  title: "Date Input/Interactions",
+  parameters: {
+    themeProvider: { chromatic: { theme: "sage" } },
   },
   decorators: [
-    (StoryToRender) => (
+    (StoryToRender: React.ComponentType) => (
       <DefaultDecorator>
         <StoryToRender />
       </DefaultDecorator>
     ),
   ],
 };
-DateTyping.storyName = "Date Typing";
 
-export const MinMaxDate: Story = {
+export const LegacyMonthYearNavigation: Story = {
   render: () => (
-    <DateInput
-      label="Date"
-      name="date-input"
-      value="17/07/2024"
-      onChange={() => {}}
-      minDate="2024-07-14"
-      maxDate="2024-07-20"
+    <NavigationExample
+      variant="legacy"
+      label="Legacy date"
+      name="date-input-legacy"
     />
   ),
   play: async ({ canvasElement }) => {
@@ -104,118 +67,55 @@ export const MinMaxDate: Story = {
       return;
     }
     const canvas = within(canvasElement);
-    const calendarIcon = canvas.getByTestId("icon");
-    await userEvent.click(calendarIcon);
-  },
-  decorators: [
-    (StoryToRender) => (
-      <DefaultDecorator>
-        <StoryToRender />
-      </DefaultDecorator>
-    ),
-  ],
-};
-MinMaxDate.storyName = "Min/Max Date";
-
-export const DisabledDate: Story = {
-  render: () => {
-    const isWeekend = (day: Date) => [0, 6].includes(day.getDay());
-    return (
-      <DateInput
-        label="Date"
-        name="date-input"
-        value="10/07/2024"
-        onChange={() => {}}
-        pickerProps={{
-          disabled: [
-            isWeekend,
-            {
-              from: new Date(2024, 6, 15),
-              to: new Date(2024, 6, 18),
-            },
-            { before: new Date(2024, 6, 3) },
-            { after: new Date(2024, 6, 29) },
-          ],
-        }}
-      />
+    await userEvent.click(canvas.getByTestId("icon"));
+    await userEvent.selectOptions(
+      canvas.getByRole("combobox", { name: "Choose the year" }),
+      format(initialDate, "yyyy"),
+    );
+    await userEvent.selectOptions(
+      canvas.getByRole("combobox", { name: "Choose the month" }),
+      String(initialDate.getMonth()),
+    );
+    await userEvent.click(
+      canvas.getByRole("button", { name: initialDateName }),
+    );
+    await expect(canvas.getByLabelText("Legacy date")).toHaveValue(
+      initialDateValue,
     );
   },
-  play: async ({ canvasElement }) => {
-    if (!allowInteractions()) {
-      return;
-    }
-    const canvas = within(canvasElement);
-    const calendarIcon = canvas.getByTestId("icon");
-    await userEvent.click(calendarIcon);
-  },
-  decorators: [
-    (StoryToRender) => (
-      <DefaultDecorator>
-        <StoryToRender />
-      </DefaultDecorator>
-    ),
-  ],
 };
-DisabledDate.storyName = "Disabled Dates";
+LegacyMonthYearNavigation.storyName = "Legacy Month/Year Navigation";
 
-export const WeekStartDay: Story = {
+export const TypicalMonthYearNavigation: Story = {
   render: () => (
-    <Box display="flex" justifyContent="space-around">
-      <I18nProvider
-        locale={{
-          locale: () => "en-US",
-          date: {
-            dateFnsLocale: () => enUSLocale,
-            ariaLabels: {
-              previousMonthButton: () => "en-US-previous",
-              nextMonthButton: () => "en-US-next",
-            },
-          },
-        }}
-      >
-        <DateInput
-          label="`en-US` locale - First week day: Sunday"
-          value="17/07/2024"
-          onChange={() => {}}
-          data-role="enUsDate"
-        />
-      </I18nProvider>
-      <I18nProvider
-        locale={{
-          locale: () => "de",
-          date: {
-            dateFnsLocale: () => deLocale,
-            ariaLabels: {
-              previousMonthButton: () => "de-DE-previous",
-              nextMonthButton: () => "de-DE-next",
-            },
-          },
-        }}
-      >
-        <DateInput
-          label="`de-DE` locale - first week day: Monday"
-          value="17/07/2024"
-          onChange={() => {}}
-          data-role="deDate"
-        />
-      </I18nProvider>
-    </Box>
+    <NavigationExample
+      variant="typical"
+      label="Typical date"
+      name="date-input-typical"
+    />
   ),
   play: async ({ canvasElement }) => {
     if (!allowInteractions()) {
       return;
     }
-    const [firstIcon, secondIcon] =
-      canvasElement.querySelectorAll('[data-role="icon"]');
-    await userEvent.click(firstIcon);
-    await userEvent.click(secondIcon);
+    const canvas = within(canvasElement);
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Open calendar" }),
+    );
+    await userEvent.selectOptions(
+      canvas.getByRole("combobox", { name: "Choose the year" }),
+      format(initialDate, "yyyy"),
+    );
+    await userEvent.selectOptions(
+      canvas.getByRole("combobox", { name: "Choose the month" }),
+      String(initialDate.getMonth()),
+    );
+    await userEvent.click(
+      canvas.getByRole("button", { name: initialDateName }),
+    );
+    await expect(canvas.getByLabelText("Typical date")).toHaveValue(
+      initialDateValue,
+    );
   },
-  decorators: [
-    (StoryToRender) => (
-      <DefaultDecorator>
-        <StoryToRender />
-      </DefaultDecorator>
-    ),
-  ],
 };
-WeekStartDay.storyName = "Week Start Day";
+TypicalMonthYearNavigation.storyName = "Typical Month/Year Navigation";
diff --git a/src/components/date/date-test.stories.tsx b/src/components/date/date-test.stories.tsx
index 19a8fcd55f..6edc787e35 100644
--- a/src/components/date/date-test.stories.tsx
+++ b/src/components/date/date-test.stories.tsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react";
 import { action } from "storybook/actions";
 import { StoryObj } from "@storybook/react-vite";
+import { format, startOfDay, subDays } from "date-fns";
 import { zhCN, de, enUS, enGB } from "date-fns/locale";
+import { userEvent, within } from "storybook/test";
 
 import DateInput, { DateChangeEvent, DateInputProps } from "./date.component";
 import Box from "../box";
-import Confirm from "../confirm";
 import I18nProvider from "../i18n-provider";
+import Typography, { List, ListItem } from "../typography";
+
+const testDateValue = format(subDays(startOfDay(new Date()), 1), "dd/MM/yyyy");
 
 export default {
   title: "Date Input/Test",
@@ -53,15 +57,21 @@ export default {
   },
 };
 
-export const DateStory = ({ ...args }) => {
-  const [state, setState] = useState("2019-04-04");
+const DateStoryExample = ({
+  variant,
+  ...args
+}: DateInputProps & { variant: "legacy" | "typical" }) => {
+  const [state, setState] = useState(testDateValue);
   const setValue = (ev: DateChangeEvent) => {
     action("onChange")(ev.target.value);
     setState(ev.target.value.formattedValue);
   };
   return (
     <DateInput
-      name="dateinput"
+      {...args}
+      variant={variant}
+      label="Date"
+      name={`date-input-${variant}`}
       value={state}
       onChange={setValue}
       onBlur={(ev) => {
@@ -71,122 +81,94 @@ export const DateStory = ({ ...args }) => {
         action("onKeyDown")((ev.target as HTMLInputElement).value)
       }
       onClick={(ev) => action("onClick")((ev.target as HTMLInputElement).value)}
-      {...args}
     />
   );
 };
-DateStory.storyName = "Date Input";
 
-export const Validation = () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
+export const LegacyDateStory = (args: DateInputProps) => (
+  <DateStoryExample {...args} variant="legacy" />
+);
+LegacyDateStory.storyName = "Legacy - Date Input";
+
+export const TypicalDateStory: StoryObj<typeof DateInput> = {
+  name: "Typical - Date Input",
+  render: (args) => <DateStoryExample {...args} variant="typical" />,
+};
+
+interface ValidationInputProps {
+  error?: string;
+  name: string;
+  validationMessagePositionTop?: boolean;
+  variant: "legacy" | "typical";
+  warning?: string;
+}
+
+const ValidationInput = ({
+  error,
+  name,
+  validationMessagePositionTop,
+  variant,
+  warning,
+}: ValidationInputProps) => {
+  const [value, setValue] = useState(testDateValue);
+
+  return (
+    <DateInput
+      variant={variant}
+      validationMessagePositionTop={validationMessagePositionTop}
+      label="Date"
+      name={name}
+      inputHint={error ? "Input hint" : undefined}
+      error={error}
+      warning={warning}
+      value={value}
+      onChange={(event) => setValue(event.target.value.formattedValue)}
+      mb={2}
+    />
+  );
+};
+
+const ValidationExample = ({ variant }: { variant: "legacy" | "typical" }) => {
   return (
     <>
-      <DateInput
-        label="Date"
-        name="date-input"
-        inputHint="Input hint"
+      <ValidationInput
+        variant={variant}
+        name={`${variant}-date-error-top`}
         error="Error Message"
-        value={state}
-        onChange={setValue}
-        mb={2}
       />
-      <DateInput
-        label="Date"
-        name="date-input"
+      <ValidationInput
+        variant={variant}
+        name={`${variant}-date-warning-top`}
         warning="Warning Message"
-        value={state}
-        onChange={setValue}
-        mb={2}
       />
-      <DateInput
+      <ValidationInput
+        variant={variant}
+        name={`${variant}-date-error-bottom`}
         validationMessagePositionTop={false}
-        label="Date"
-        name="date-input"
-        inputHint="Input hint"
         error="Error Message"
-        value={state}
-        onChange={setValue}
-        mb={2}
       />
-      <DateInput
+      <ValidationInput
+        variant={variant}
+        name={`${variant}-date-warning-bottom`}
         validationMessagePositionTop={false}
-        label="Date"
-        name="date-input"
         warning="Warning Message"
-        value={state}
-        onChange={setValue}
       />
     </>
   );
 };
-Validation.storyName = "Validation";
+
+export const Validation = () => <ValidationExample variant="legacy" />;
+Validation.storyName = "Legacy - Validation";
 Validation.parameters = {
   chromatic: { disableSnapshot: false },
   themeProvider: { chromatic: { theme: "sage" } },
 };
 
-export const MultipleDates: StoryObj<typeof DateInput> = () => {
-  const [date, setDate] = useState("01/01/24");
-  const [date2, setDate2] = useState("01/01/24");
-  const [showDialog, setShowDialog] = useState(false);
-  const [active, setActive] = useState<null | number>(null);
+export const TypicalValidation = () => <ValidationExample variant="typical" />;
+TypicalValidation.storyName = "Typical - Validation";
+TypicalValidation.parameters = Validation.parameters;
 
-  return (
-    <Box
-      padding="25px"
-      display="flex"
-      flexDirection="row"
-      gap="var(--spacing200)"
-      minWidth="320px"
-      maxWidth="1024px"
-      boxSizing="border-box"
-    >
-      <DateInput
-        disablePortal
-        label="Component A"
-        onChange={(e) => setDate(e.target.value.formattedValue)}
-        value={date}
-        onPickerOpen={() => {
-          setActive(1);
-        }}
-        onPickerClose={() => {
-          setShowDialog(true);
-        }}
-        disabled={active === 2}
-      />
-      <DateInput
-        disablePortal
-        label="Component B"
-        onChange={(e) => setDate2(e.target.value.formattedValue)}
-        value={date2}
-        onPickerOpen={() => {
-          setActive(2);
-        }}
-        onPickerClose={() => {
-          setShowDialog(true);
-        }}
-        disabled={active === 1}
-      />
-      <Confirm
-        open={showDialog}
-        onConfirm={() => {
-          setShowDialog(false);
-          setActive(null);
-        }}
-      >
-        content
-      </Confirm>
-    </Box>
-  );
-};
-MultipleDates.storyName =
-  "Multiple Dates with onPickerOpen and onPickerClose callbacks";
-MultipleDates.parameters = { chromatic: { disableSnapshot: true } };
-
-interface DateInputI80NProps extends DateInputProps {
+interface DateInputI18NProps extends DateInputProps {
   locale: "en-US" | "en-GB" | "zh-CN" | "de-DE";
 }
 
@@ -197,49 +179,52 @@ const locales = {
   "de-DE": de,
 };
 
-export const I18NStory = ({ locale, ...args }: DateInputI80NProps) => {
-  const [state, setState] = useState("2019-04-05");
+const I18NExample = ({
+  locale,
+  variant,
+  ...args
+}: DateInputI18NProps & { variant: "legacy" | "typical" }) => {
+  const [state, setState] = useState(testDateValue);
   const setValue = (ev: DateChangeEvent) => {
     action("onChange")(ev.target.value);
     setState(ev.target.value.formattedValue);
   };
   return (
-    <>
-      <I18nProvider
-        locale={{
-          locale: () => locale,
-          date: {
-            ariaLabels: {
-              nextMonthButton: () => "foo",
-              previousMonthButton: () => "foo",
-            },
-            dateFnsLocale: () => locales[locale],
+    <I18nProvider
+      locale={{
+        locale: () => locale,
+        date: {
+          ariaLabels: {
+            nextMonthButton: () => "foo",
+            previousMonthButton: () => "foo",
           },
+          dateFnsLocale: () => locales[locale],
+        },
+      }}
+    >
+      <DateInput
+        variant={variant}
+        name={`${variant}-date-i18n`}
+        label={locale}
+        m={2}
+        {...args}
+        value={state}
+        onChange={setValue}
+        onBlur={(ev) => {
+          action("onBlur")(ev.target.value);
         }}
-      >
-        <DateInput
-          name="dateinput"
-          label={locale}
-          m={2}
-          {...args}
-          value={state}
-          onChange={setValue}
-          onBlur={(ev) => {
-            action("onBlur")(ev.target.value);
-          }}
-          onKeyDown={(ev) =>
-            action("onKeyDown")((ev.target as HTMLInputElement).value)
-          }
-          onClick={(ev) =>
-            action("onClick")((ev.target as HTMLInputElement).value)
-          }
-        />
-      </I18nProvider>
-    </>
+        onKeyDown={(ev) =>
+          action("onKeyDown")((ev.target as HTMLInputElement).value)
+        }
+        onClick={(ev) =>
+          action("onClick")((ev.target as HTMLInputElement).value)
+        }
+      />
+    </I18nProvider>
   );
 };
-I18NStory.storyName = "i18n Story";
-I18NStory.argTypes = {
+
+const i18nArgTypes = {
   locale: {
     control: {
       type: "select",
@@ -247,20 +232,315 @@ I18NStory.argTypes = {
     options: ["en-US", "en-GB", "zh-CN", "de-DE"],
   },
 };
-I18NStory.args = {
+const i18nArgs = {
   locale: "en-US",
   dateFormatOverride: "dd/MM/yyyy",
 };
 
-export const AutoFocus = () => {
-  const [state, setState] = useState("01/10/2016");
+export const LegacyI18N = (args: DateInputI18NProps) => (
+  <I18NExample {...args} variant="legacy" />
+);
+LegacyI18N.storyName = "Legacy - i18n";
+LegacyI18N.argTypes = i18nArgTypes;
+LegacyI18N.args = i18nArgs;
+
+export const TypicalI18N = (args: DateInputI18NProps) => (
+  <I18NExample {...args} variant="typical" />
+);
+TypicalI18N.storyName = "Typical - i18n";
+TypicalI18N.argTypes = i18nArgTypes;
+TypicalI18N.args = i18nArgs;
+
+const AutoFocusExample = ({ variant }: { variant: "legacy" | "typical" }) => {
+  const [state, setState] = useState(testDateValue);
   const setValue = (ev: DateChangeEvent) => {
     setState(ev.target.value.formattedValue);
   };
-  return <DateInput label="Date" value={state} onChange={setValue} autoFocus />;
+  return (
+    <DateInput
+      variant={variant}
+      label="Date"
+      value={state}
+      onChange={setValue}
+      autoFocus
+    />
+  );
 };
-AutoFocus.storyName = "Auto Focus";
-AutoFocus.parameters = {
+
+const autoFocusParameters = {
   themeProvider: { chromatic: { theme: "sage" } },
   chromatic: { disableSnapshot: false },
 };
+
+export const LegacyAutoFocus = () => <AutoFocusExample variant="legacy" />;
+LegacyAutoFocus.storyName = "Legacy - Auto Focus";
+LegacyAutoFocus.parameters = autoFocusParameters;
+
+export const TypicalAutoFocus = () => <AutoFocusExample variant="typical" />;
+TypicalAutoFocus.storyName = "Typical - Auto Focus";
+TypicalAutoFocus.parameters = autoFocusParameters;
+
+const RegressionDateInput = ({
+  variant = "typical",
+  ...props
+}: Partial<DateInputProps>) => {
+  const [value, setValue] = useState(props.value || testDateValue);
+
+  return (
+    <DateInput
+      {...props}
+      variant={variant}
+      label={props.label || "Date"}
+      name={`date-input-regression-${variant}`}
+      value={value}
+      onChange={(event) => setValue(event.target.value.formattedValue)}
+    />
+  );
+};
+
+const LabelsetWrappingExamples = ({
+  variant,
+}: {
+  variant: "legacy" | "typical";
+}) => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    alignItems="flex-start"
+    gap="var(--global-space-layout-m)"
+  >
+    {[undefined, "240px", "420px"].map((width) => (
+      <Box key={width || "natural"} width={width}>
+        <RegressionDateInput
+          variant={variant}
+          required
+          label="Date of the service agreement completion"
+          inputHint="Use the format DD/MM/YYYY and include the exact completion date from the signed service agreement document."
+        />
+      </Box>
+    ))}
+    <Box width="600px">
+      <RegressionDateInput
+        variant={variant}
+        required
+        labelInline
+        labelWidth={55}
+        inputWidth={45}
+        label="Date of the service agreement completion"
+        inputHint="Use the format DD/MM/YYYY and include the exact completion date from the signed service agreement document."
+      />
+    </Box>
+  </Box>
+);
+
+export const LabelsetWrapping = () => (
+  <Box display="flex" flexDirection="column" gap="var(--global-space-layout-m)">
+    {(["typical", "legacy"] as const).map((variant) => (
+      <Box key={variant}>
+        <Typography variant="h4" mb={2}>
+          {variant === "typical" ? "Typical" : "Legacy"}
+        </Typography>
+        <LabelsetWrappingExamples variant={variant} />
+      </Box>
+    ))}
+  </Box>
+);
+LabelsetWrapping.storyName = "Visual - Labelset Wrapping";
+
+const InlineStateExamples = ({
+  variant,
+}: {
+  variant: "legacy" | "typical";
+}) => (
+  <>
+    <RegressionDateInput
+      variant={variant}
+      labelInline
+      size="small"
+      required
+      warning="Caution message (fix is optional)"
+      inputHint="Required caution state hint"
+      mb={3}
+    />
+    <RegressionDateInput
+      variant={variant}
+      labelInline
+      size="medium"
+      error="Enter a valid date"
+      mb={3}
+    />
+    <RegressionDateInput
+      variant={variant}
+      labelInline
+      size="medium"
+      label="Date with caution below"
+      inputHint="Check that the date is correct"
+      warning="Caution message (fix is optional)"
+      validationMessagePositionTop={false}
+      mb={3}
+    />
+    <RegressionDateInput
+      variant={variant}
+      labelInline
+      size="medium"
+      label="Date with error below"
+      inputHint="Use the format DD/MM/YYYY"
+      error="Enter a valid date"
+      validationMessagePositionTop={false}
+      mb={3}
+    />
+    <RegressionDateInput
+      variant={variant}
+      labelInline
+      size="large"
+      readOnly
+      mb={3}
+    />
+    <RegressionDateInput variant={variant} labelInline size="medium" disabled />
+  </>
+);
+
+export const InlineStates = () => (
+  <Box display="flex" flexDirection="column" gap="var(--global-space-layout-m)">
+    {(["typical", "legacy"] as const).map((variant) => (
+      <Box key={variant}>
+        <Typography variant="h4" mb={2}>
+          {variant === "typical" ? "Typical" : "Legacy"}
+        </Typography>
+        <InlineStateExamples variant={variant} />
+      </Box>
+    ))}
+  </Box>
+);
+InlineStates.storyName = "Visual - States with Inline Label";
+
+const addDays = (date: Date, days: number) => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+const formatStoryDate = (date: Date) =>
+  [date.getDate(), date.getMonth() + 1, date.getFullYear()]
+    .map((part, index) => (index < 2 ? String(part).padStart(2, "0") : part))
+    .join("/");
+
+const todayRangeStartDate = startOfDay(new Date());
+
+const RangePreview = ({
+  label,
+  variant,
+  rangeStart,
+  rangeEnd,
+  value = formatStoryDate(todayRangeStartDate),
+}: {
+  label: string;
+  variant: "legacy" | "typical";
+  rangeStart: Date;
+  rangeEnd: Date;
+  value?: string;
+}) => (
+  <Box mb={3}>
+    <DateInput
+      variant={variant}
+      label={label}
+      name={`${variant}-${label.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`}
+      value={value}
+      allowEmptyValue
+      onChange={() => {}}
+      pickerProps={{
+        modifiers: {
+          range_start: rangeStart,
+          range_middle: { after: rangeStart, before: rangeEnd },
+          range_end: rangeEnd,
+        },
+      }}
+    />
+  </Box>
+);
+
+const RangeStateExamples = ({ variant }: { variant: "legacy" | "typical" }) => (
+  <>
+    <RangePreview
+      variant={variant}
+      label="Today as selected range start"
+      rangeStart={todayRangeStartDate}
+      rangeEnd={addDays(todayRangeStartDate, 7)}
+    />
+    <RangePreview
+      variant={variant}
+      label="Today as selected range end"
+      rangeStart={addDays(todayRangeStartDate, -7)}
+      rangeEnd={todayRangeStartDate}
+    />
+    <RangePreview
+      variant={variant}
+      label="Today in selected range"
+      rangeStart={addDays(todayRangeStartDate, -5)}
+      rangeEnd={addDays(todayRangeStartDate, 5)}
+      value=""
+    />
+  </>
+);
+
+export const RangeStates = () => (
+  <Box display="flex" flexDirection="column" gap="var(--global-space-layout-m)">
+    <Box>
+      <Typography variant="p" mb={1}>
+        Visual regression coverage for DateRange calendar highlighting.
+      </Typography>
+      <List mb={2}>
+        <ListItem>The highlighted ranges are fixed picker modifiers.</ListItem>
+        <ListItem>DateRange owns the interactive range behaviour.</ListItem>
+      </List>
+    </Box>
+    {(["typical", "legacy"] as const).map((variant) => (
+      <Box key={variant}>
+        <Typography variant="h4" mb={2}>
+          {variant === "typical" ? "Typical" : "Legacy"}
+        </Typography>
+        <RangeStateExamples variant={variant} />
+      </Box>
+    ))}
+  </Box>
+);
+RangeStates.storyName = "Visual - Range States";
+
+const crossMonthRangeStart = new Date(2026, 6, 22);
+const crossMonthRangeEnd = new Date(2026, 7, 4);
+
+export const CrossMonthRangeRegression: StoryObj<typeof DateInput> = {
+  name: "Visual - Cross-Month Range Regression",
+  render: () => (
+    <Box>
+      <Typography variant="p" mb={1}>
+        Regression coverage for a typical range spanning calendar rows and a
+        month boundary.
+      </Typography>
+      <List mb={2}>
+        <ListItem>Only the real range endpoints have rounded edges.</ListItem>
+        <ListItem>Range edges at row wraps remain square.</ListItem>
+        <ListItem>
+          Highlighting continues through the visible August outside days.
+        </ListItem>
+      </List>
+      <RangePreview
+        variant="typical"
+        label="Selected range from 22 July to 4 August"
+        rangeStart={crossMonthRangeStart}
+        rangeEnd={crossMonthRangeEnd}
+        value={formatStoryDate(crossMonthRangeStart)}
+      />
+    </Box>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(
+      canvas.getByRole("button", { name: "Open calendar" }),
+    );
+  },
+  parameters: {
+    chromatic: { disableSnapshot: false },
+    themeProvider: { chromatic: { theme: "sage" } },
+  },
+};
diff --git a/src/components/date/date-typical.test.tsx b/src/components/date/date-typical.test.tsx
new file mode 100644
index 0000000000..513804cd61
--- /dev/null
+++ b/src/components/date/date-typical.test.tsx
@@ -0,0 +1,1165 @@
+import React from "react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils";
+
+import DateInput from "./date.component";
+
+const TypicalDateInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof DateInput>
+>((props, ref) => <DateInput variant="typical" ref={ref} {...props} />);
+
+TypicalDateInput.displayName = "TypicalDateInput";
+
+const formatDateInputValue = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+};
+
+const ControlledTypicalDateInput = ({
+  initialValue,
+  onChange,
+}: {
+  initialValue: string;
+  onChange?: jest.Mock;
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  return (
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={(ev) => {
+        onChange?.(ev);
+        setValue(ev.target.value.formattedValue);
+      }}
+      value={value}
+    />
+  );
+};
+
+testStyledSystemMargin(
+  (props) => <TypicalDateInput onChange={() => {}} value="" {...props} />,
+  () => screen.getAllByRole("presentation")[0],
+);
+
+beforeAll(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.runOnlyPendingTimers();
+});
+
+afterAll(() => {
+  jest.useRealTimers();
+});
+
+test("associates the label with the date input", () => {
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  expect(screen.getByLabelText("Date")).toBe(
+    screen.getByRole("textbox", { name: "Date" }),
+  );
+});
+
+test("updates the displayed value when the controlled value changes", () => {
+  const { rerender } = render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="2025-01-15"
+    />,
+  );
+
+  expect(screen.getByRole("textbox", { name: "Date" })).toHaveValue(
+    "15/01/2025",
+  );
+
+  rerender(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="2025-02-20"
+    />,
+  );
+
+  expect(screen.getByRole("textbox", { name: "Date" })).toHaveValue(
+    "20/02/2025",
+  );
+});
+
+test("allows consumers to override DayPicker renderers", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onChange = jest.fn();
+
+  render(
+    <TypicalDateInput
+      onChange={onChange}
+      value=""
+      pickerProps={{
+        footer: "Custom footer content",
+        classNames: { month_grid: "custom-calendar", day: undefined },
+        components: {
+          DayButton: ({ modifiers: _modifiers, ...buttonProps }) => (
+            <button {...buttonProps} data-role="custom-day-button" />
+          ),
+          Weekday: ({ children, ...weekdayProps }) => (
+            <th {...weekdayProps} data-role="custom-weekday">
+              {children}
+            </th>
+          ),
+          Footer: () => <div>Custom footer</div>,
+        },
+      }}
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+
+  expect(screen.getByRole("grid")).toHaveClass(
+    "rdp-month_grid",
+    "custom-calendar",
+  );
+  screen
+    .getAllByRole("cell")
+    .forEach((day) => expect(day).not.toHaveClass("undefined"));
+  expect(screen.getByText("Custom footer")).toBeVisible();
+  expect(screen.getAllByTestId("custom-weekday")).toHaveLength(7);
+  const customDayButton = screen.getAllByTestId("custom-day-button")[0];
+  expect(customDayButton).toHaveClass("rdp-day_button");
+  expect(customDayButton).toHaveAttribute("aria-label");
+
+  await user.click(customDayButton);
+
+  expect(onChange).toHaveBeenCalled();
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+});
+
+test("should keep tab order from input to calendar button", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  await user.tab();
+  expect(screen.getByRole("textbox")).toHaveFocus();
+
+  await user.tab();
+  const calendarButton = screen.getByRole("button", { name: "Open calendar" });
+  expect(calendarButton).toHaveFocus();
+  expect(calendarButton).toHaveAttribute("aria-haspopup", "dialog");
+  expect(calendarButton).toHaveAttribute("aria-expanded", "false");
+  expect(calendarButton).not.toHaveAttribute("aria-controls");
+});
+
+test("should move focus from toggle to next interactive element when picker is closed", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <>
+      <TypicalDateInput
+        label="Date"
+        name="typical-date"
+        onChange={() => {}}
+        value=""
+      />
+      <button type="button">After</button>
+    </>,
+  );
+
+  await user.tab();
+  await user.tab();
+  expect(screen.getByRole("button", { name: "Open calendar" })).toHaveFocus();
+
+  await user.tab();
+  expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
+});
+
+test("should not open picker when focusing the input", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  await user.tab();
+  expect(screen.getByRole("textbox")).toHaveFocus();
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+});
+
+test("should open picker and focus selected day when Enter is pressed on calendar button", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="04/04/2019"
+    />,
+  );
+
+  await user.tab();
+  await user.tab();
+  await user.keyboard("{Enter}");
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("grid")).toBeVisible();
+  await waitFor(() => {
+    expect(
+      screen.getByRole("button", { name: /Thursday, April 4th, 2019/ }),
+    ).toHaveFocus();
+  });
+});
+
+test("should open picker and focus selected day when Space is pressed on calendar button", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="04/04/2019"
+    />,
+  );
+
+  const calendarButton = screen.getByRole("button", { name: "Open calendar" });
+  calendarButton.focus();
+  await user.keyboard("[Space]");
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("grid")).toBeVisible();
+  await waitFor(() => {
+    expect(
+      screen.getByRole("button", { name: /Thursday, April 4th, 2019/ }),
+    ).toHaveFocus();
+  });
+});
+
+test("should open picker and focus a day when calendar button is clicked", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  const calendarButton = screen.getByRole("button", { name: "Open calendar" });
+  await user.click(calendarButton);
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+  expect(calendarButton).toHaveAttribute("aria-expanded", "true");
+  expect(calendarButton).toHaveAttribute(
+    "aria-controls",
+    screen.getByRole("dialog").id,
+  );
+
+  const picker = screen.getByRole("grid");
+  expect(picker).toBeVisible();
+
+  await waitFor(() => {
+    expect(screen.getByRole("button", { name: /today/i })).toHaveFocus();
+  });
+});
+
+test("should label the dialog with a static locale-derived aria-label", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const dialog = screen.getByRole("dialog");
+
+  expect(dialog).toHaveAttribute("aria-label", "Choose a date");
+
+  within(dialog).getByRole("grid");
+});
+
+test("should render date buttons with type button and hidden full date text", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const selectedDay = screen.getByRole("button", {
+    name: "Tuesday, July 15th, 2025, selected",
+  });
+  expect(selectedDay).toHaveAttribute("type", "button");
+  expect(selectedDay).toHaveTextContent("Tuesday, July 15th, 2025, selected");
+  expect(within(selectedDay).getByText("15")).toBeInTheDocument();
+
+  const dateButtons = within(screen.getByRole("grid")).getAllByRole("button");
+  expect(dateButtons.length).toBeGreaterThan(0);
+  dateButtons.forEach((button) => {
+    expect(button).toHaveAttribute("type", "button");
+    expect(button).toHaveTextContent(/\w+, \w+ \d/);
+  });
+});
+
+test("should render today indicator when today is selected", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value={formatDateInputValue(new Date())}
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const todayButton = screen.getByRole("button", { name: /today/i });
+  expect(
+    within(todayButton).getByTestId("date-picker-today-indicator"),
+  ).toBeInTheDocument();
+});
+
+test("should cycle focus inside picker for tab and shift-tab in single mode", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const todayButton = screen.getByRole("button", { name: /today/i });
+  const closeButton = screen.getByRole("button", { name: "Close" });
+  const monthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+  const yearSelector = screen.getByRole("combobox", {
+    name: "Choose the year",
+  });
+
+  expect(todayButton).toHaveFocus();
+
+  await user.tab();
+  expect(closeButton).toHaveFocus();
+  await user.tab();
+  expect(monthSelector).toHaveFocus();
+  await user.tab();
+  expect(yearSelector).toHaveFocus();
+  await user.tab();
+  expect(todayButton).toHaveFocus();
+
+  await user.tab({ shift: true });
+  expect(yearSelector).toHaveFocus();
+  await user.tab({ shift: true });
+  expect(monthSelector).toHaveFocus();
+  await user.tab({ shift: true });
+  expect(closeButton).toHaveFocus();
+  await user.tab({ shift: true });
+  expect(todayButton).toHaveFocus();
+});
+
+test("should keep the year selector enabled and in the focus cycle when minDate/maxDate narrow the range to a single year", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      minDate="2025-01-01"
+      maxDate="2025-12-31"
+      onChange={() => {}}
+      value="15/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const selectedDay = screen.getByRole("button", {
+    name: /Tuesday, July 15th, 2025/,
+  });
+  const closeButton = screen.getByRole("button", { name: "Close" });
+  const monthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+  const yearSelector = screen.getByRole("combobox", {
+    name: "Choose the year",
+  });
+
+  expect(monthSelector).toBeEnabled();
+  expect(yearSelector).toBeEnabled();
+  await user.tab();
+  expect(closeButton).toHaveFocus();
+  await user.tab();
+  expect(monthSelector).toHaveFocus();
+  await user.tab();
+  expect(yearSelector).toHaveFocus();
+  await user.tab();
+  expect(selectedDay).toHaveFocus();
+  await user.tab({ shift: true });
+  expect(yearSelector).toHaveFocus();
+});
+
+test("should clear pending selector navigation when shift-tabbing away", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/01/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const closeButton = screen.getByRole("button", { name: "Close" });
+  const monthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+  const yearSelector = screen.getByRole("combobox", {
+    name: "Choose the year",
+  });
+
+  act(() => monthSelector.focus());
+  fireEvent.change(monthSelector, { target: { value: "2" } });
+  await user.tab({ shift: true });
+  expect(closeButton).toHaveFocus();
+  await user.tab();
+  expect(monthSelector).toHaveFocus();
+  await user.tab();
+  expect(yearSelector).toHaveFocus();
+});
+
+test("should render the footer close action as a button", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("button", { name: "Close" })).toHaveAttribute(
+    "type",
+    "button",
+  );
+});
+
+test.each([
+  ["fieldHelp", { fieldHelp: "Deprecated field help" }],
+  ["labelHelp", { labelHelp: "Deprecated label help" }],
+])(
+  "should render inputHint instead of deprecated %s content",
+  (_, helpProps) => {
+    render(
+      <TypicalDateInput
+        label="Date"
+        name="typical-date"
+        onChange={() => {}}
+        value=""
+        inputHint="Date input hint"
+        validationIconId="legacy-validation-icon"
+        {...helpProps}
+      />,
+    );
+
+    expect(screen.getByText("Date input hint")).toBeVisible();
+    expect(
+      screen.queryByText(Object.values(helpProps)[0]),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("textbox")).not.toHaveAttribute("validationIconId");
+  },
+);
+
+test("should render validation above the input by default", () => {
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+      error="Error Message"
+    />,
+  );
+
+  const validation = screen.getByText("Error Message");
+  const inputContainer = screen
+    .getByRole("textbox")
+    // eslint-disable-next-line testing-library/no-node-access
+    .closest('[data-role="input-container"]');
+
+  expect(
+    validation.compareDocumentPosition(inputContainer as Node) &
+      Node.DOCUMENT_POSITION_FOLLOWING,
+  ).toBeTruthy();
+});
+
+test("should render validation below the input when requested", () => {
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+      warning="Warning Message"
+      validationMessagePositionTop={false}
+    />,
+  );
+
+  const validation = screen.getByText("Warning Message");
+  const inputContainer = screen
+    .getByRole("textbox")
+    // eslint-disable-next-line testing-library/no-node-access
+    .closest('[data-role="input-container"]');
+
+  expect(
+    (inputContainer as Node).compareDocumentPosition(validation) &
+      Node.DOCUMENT_POSITION_FOLLOWING,
+  ).toBeTruthy();
+});
+
+test("should not render inputHint when no label is provided", () => {
+  render(
+    <TypicalDateInput
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+      inputHint="Use DD/MM/YYYY"
+    />,
+  );
+
+  expect(screen.queryByText("Use DD/MM/YYYY")).not.toBeInTheDocument();
+});
+
+test("should close picker on Escape", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("dialog")).toBeVisible();
+  await user.keyboard("{Escape}");
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+});
+
+test("should close picker and call onPickerClose when clicking outside", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onPickerClose = jest.fn();
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      onPickerClose={onPickerClose}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("dialog")).toBeVisible();
+
+  fireEvent.mouseDown(document.body);
+
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+
+  fireEvent.mouseDown(document.body);
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+});
+
+test("should close picker and call onPickerClose when clicking the input", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onPickerClose = jest.fn();
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      onPickerClose={onPickerClose}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("dialog")).toBeVisible();
+
+  await user.click(screen.getByRole("textbox"));
+
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+});
+
+test("should close and call onPickerClose when a date is selected with Enter", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onPickerClose = jest.fn();
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      onPickerClose={onPickerClose}
+      value="15/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(
+    screen.getByRole("button", { name: /Tuesday, July 15th, 2025/ }),
+  ).toHaveFocus();
+  await user.keyboard("{Enter}");
+
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+});
+
+test("should move focus into the picker when disablePortal is false", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+      disablePortal={false}
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  await user.click(screen.getByRole("textbox"));
+  await user.tab();
+
+  expect(
+    screen.getByRole("button", { name: /Tuesday, July 15th, 2025/ }),
+  ).toHaveFocus();
+});
+
+test("should allow natural tab from input when disablePortal is true and picker is open", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+      disablePortal
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const textbox = screen.getByRole("textbox");
+  act(() => {
+    textbox.focus();
+  });
+  await user.tab();
+
+  expect(textbox).not.toHaveFocus();
+});
+
+test("should close in single mode when date is selected with Space", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  await user.keyboard("[Space]");
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+});
+
+test("should keep focus on selector when selecting with keyboard arrows", async () => {
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const monthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+
+  act(() => {
+    monthSelector.focus();
+  });
+  expect(monthSelector).toHaveFocus();
+
+  await user.keyboard("[ArrowDown]");
+
+  expect(monthSelector).toHaveFocus();
+});
+
+test("should keep focus on month selector until Tab after month change", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/01/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const monthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+  act(() => {
+    monthSelector.focus();
+  });
+  fireEvent.change(monthSelector, { target: { value: "2" } });
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("dialog")).toBeInTheDocument();
+  expect(monthSelector).toHaveFocus();
+  expect(monthSelector).toHaveValue("2");
+
+  const firstCurrentMonthDay = screen.getByRole("button", {
+    name: "Saturday, March 1st, 2025",
+  });
+
+  await user.tab();
+  await waitFor(() => {
+    expect(firstCurrentMonthDay).toHaveFocus();
+  });
+});
+
+test("should not update input value when selected date month is changed", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onChange = jest.fn();
+  render(
+    <ControlledTypicalDateInput
+      initialValue="15/01/2025"
+      onChange={onChange}
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const monthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+  act(() => {
+    monthSelector.focus();
+  });
+  fireEvent.change(monthSelector, { target: { value: "1" } });
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("textbox")).toHaveValue("15/01/2025");
+  expect(onChange).not.toHaveBeenCalled();
+  expect(screen.getByRole("dialog")).toBeInTheDocument();
+  expect(monthSelector).toHaveFocus();
+
+  await user.click(screen.getByRole("button", { name: "Close" }));
+  expect(screen.getByRole("textbox")).toHaveValue("15/01/2025");
+  expect(onChange).not.toHaveBeenCalled();
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const reopenedMonthSelector = screen.getByRole("combobox", {
+    name: "Choose the month",
+  });
+  expect(reopenedMonthSelector).toHaveValue("0");
+  fireEvent.change(reopenedMonthSelector, { target: { value: "1" } });
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  await user.click(
+    screen.getByRole("button", { name: "Saturday, February 15th, 2025" }),
+  );
+
+  expect(screen.getByRole("textbox")).toHaveValue("15/02/2025");
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test("should keep focus on year selector until Tab after year change", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/01/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const yearSelector = screen.getByRole("combobox", {
+    name: "Choose the year",
+  });
+  act(() => {
+    yearSelector.focus();
+  });
+  fireEvent.change(yearSelector, { target: { value: "2026" } });
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("dialog")).toBeInTheDocument();
+  expect(yearSelector).toHaveFocus();
+  expect(yearSelector).toHaveValue("2026");
+
+  const firstCurrentMonthDay = screen.getByRole("button", {
+    name: "Thursday, January 1st, 2026",
+  });
+
+  await user.tab();
+  await waitFor(() => {
+    expect(firstCurrentMonthDay).toHaveFocus();
+  });
+});
+
+test("should not update input value when selected date year is changed", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onChange = jest.fn();
+  render(
+    <ControlledTypicalDateInput
+      initialValue="15/01/2025"
+      onChange={onChange}
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const yearSelector = screen.getByRole("combobox", {
+    name: "Choose the year",
+  });
+  act(() => {
+    yearSelector.focus();
+  });
+  fireEvent.change(yearSelector, { target: { value: "2026" } });
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(screen.getByRole("textbox")).toHaveValue("15/01/2025");
+  expect(onChange).not.toHaveBeenCalled();
+  expect(screen.getByRole("dialog")).toBeInTheDocument();
+  expect(yearSelector).toHaveFocus();
+
+  await user.click(
+    screen.getByRole("button", { name: "Thursday, January 15th, 2026" }),
+  );
+
+  expect(screen.getByRole("textbox")).toHaveValue("15/01/2026");
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test.each([
+  ["month", "Choose the month", "0"],
+  ["year", "Choose the year", "2025"],
+] as const)(
+  "should leave an empty input unchanged when the %s selector is changed",
+  async (_selector, accessibleName, value) => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    const onChange = jest.fn();
+    render(<ControlledTypicalDateInput initialValue="" onChange={onChange} />);
+
+    await user.click(screen.getByRole("button", { name: "Open calendar" }));
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    fireEvent.change(screen.getByRole("combobox", { name: accessibleName }), {
+      target: { value },
+    });
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    expect(screen.getByRole("textbox")).toHaveValue("");
+    expect(onChange).not.toHaveBeenCalled();
+  },
+);
+
+test("should move focus with up and down arrows by week", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  const selectedDay = screen.getByRole("button", {
+    name: /Tuesday, July 15th, 2025/,
+  });
+  expect(selectedDay).toHaveFocus();
+
+  await user.keyboard("{ArrowUp}");
+  expect(
+    screen.getByRole("button", { name: /Tuesday, July 8th, 2025/ }),
+  ).toHaveFocus();
+
+  await user.keyboard("{ArrowDown}");
+  expect(selectedDay).toHaveFocus();
+});
+
+test("should wrap left arrow to previous month boundary", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="01/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(
+    screen.getByRole("button", { name: /Tuesday, July 1st, 2025/ }),
+  ).toHaveFocus();
+  await user.keyboard("{ArrowLeft}");
+  expect(
+    screen.getByRole("button", { name: /Monday, June 30th, 2025/ }),
+  ).toHaveFocus();
+});
+
+test("should wrap right arrow to next month boundary", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="31/07/2025"
+    />,
+  );
+
+  await user.click(screen.getByRole("button", { name: "Open calendar" }));
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
+
+  expect(
+    screen.getByRole("button", { name: /Thursday, July 31st, 2025/ }),
+  ).toHaveFocus();
+  await user.keyboard("{ArrowRight}");
+  expect(
+    screen.getByRole("button", { name: /Friday, August 1st, 2025/ }),
+  ).toHaveFocus();
+});
+
+test("should disable calendar button when readOnly or disabled", () => {
+  const { rerender } = render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+      readOnly
+    />,
+  );
+
+  const readOnlyCalendarButton = screen.getByRole("button", {
+    name: "Open calendar",
+  });
+  expect(readOnlyCalendarButton).toBeDisabled();
+  expect(readOnlyCalendarButton).not.toHaveAttribute("aria-controls");
+
+  rerender(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+      disabled
+    />,
+  );
+
+  const disabledCalendarButton = screen.getByRole("button", {
+    name: "Open calendar",
+  });
+  expect(disabledCalendarButton).toBeDisabled();
+  expect(disabledCalendarButton).not.toHaveAttribute("aria-controls");
+});
+
+test("should render inline required label without hint", () => {
+  render(
+    <TypicalDateInput
+      label="Date"
+      labelInline
+      required
+      name="typical-date"
+      onChange={() => {}}
+      value="15/07/2025"
+    />,
+  );
+  expect(screen.getByText("Date")).toHaveStyleRule("content", '"*"', {
+    modifier: "::after",
+  });
+});
+
+test("should call onFocus when input receives focus", () => {
+  const onFocus = jest.fn();
+  render(
+    <TypicalDateInput
+      label="Date"
+      name="typical-date"
+      onChange={() => {}}
+      value=""
+      onFocus={onFocus}
+    />,
+  );
+
+  act(() => {
+    screen.getByRole("textbox").focus();
+  });
+
+  expect(onFocus).toHaveBeenCalled();
+});
diff --git a/src/components/date/date.component.tsx b/src/components/date/date.component.tsx
index f4860fd995..45818ab1f5 100644
--- a/src/components/date/date.component.tsx
+++ b/src/components/date/date.component.tsx
@@ -1,24 +1,12 @@
 import React, {
+  useCallback,
   useContext,
-  useEffect,
   useMemo,
   useRef,
   useState,
-  useCallback,
 } from "react";
 
-import {
-  additionalYears,
-  findMatchedFormatAndValue,
-  formattedValue,
-  formatToISO,
-  isDateValid,
-  parseDate,
-  parseISODate,
-  checkISOFormatAndLength,
-  getSeparator,
-  isValidLocaleDate,
-} from "./__internal__/utils";
+import { formattedValue, isDateValid } from "./__internal__/utils/utils";
 import useLocale from "../../hooks/__internal__/useLocale";
 import Events from "../../__internal__/utils/helpers/events";
 import {
@@ -26,8 +14,9 @@ import {
   filterStyledSystemMarginProps,
 } from "../../style/utils";
 import getFormatData from "./__internal__/date-formats";
-import StyledDateInput, { datePickerWidth } from "./date.style";
-import Textbox, { TextboxProps } from "../textbox";
+import StyledDateInput, { dateInputWidthBySize } from "./date.style";
+import { TextboxProps } from "../textbox";
+import TextInput from "../textbox/__internal__/__next__";
 import DatePicker, { PickerProps } from "./__internal__/date-picker";
 import DateRangeContext, {
   InputName,
@@ -36,15 +25,10 @@ import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener"
 import guid from "../../__internal__/utils/helpers/guid";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import FieldsetContext from "../fieldset/__internal__/fieldset.context";
-
-interface CustomDateEvent {
-  type: string;
-  target: {
-    id?: string;
-    name?: string;
-    value: string;
-  };
-}
+import DatePickerTrigger from "./__internal__/date-picker-trigger/date-picker-trigger.component";
+import useDatePickerState from "./__internal__/hooks/useDatePickerState";
+import useDateInputState from "./__internal__/hooks/useDateInputState";
+import useUniqueId from "../../hooks/__internal__/useUniqueId";
 
 export interface DateChangeEvent {
   target: {
@@ -110,24 +94,50 @@ export interface DateInputProps
   onPickerClose?: () => void;
   /** Date format string to be applied to the date inputs */
   dateFormatOverride?: string;
-  /** Prop to specify the aria-label attribute of the date picker */
+  /**
+   * @deprecated The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`).
+   * Remove this prop; it has no effect.
+   */
   datePickerAriaLabel?: string;
-  /** Prop to specify the aria-labelledby attribute of the date picker */
+  /**
+   * @deprecated The dialog label is now always derived from the locale (`date.ariaLabels.chooseDate`).
+   * Remove this prop; it has no effect.
+   */
   datePickerAriaLabelledBy?: string;
+  /** Date input presentation. Typical is the default; legacy retains its icon trigger. */
+  variant?: "legacy" | "typical";
+  /**
+   * Number of years shown either side of the bounds (`minDate`/`maxDate`, or
+   * `pickerProps.startMonth`/`endMonth`) or the anchor year in the year
+   * selector dropdown. Defaults to 10.
+   */
+  yearRangeOffset?: number;
 }
 
 export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
   (
     {
-      adaptiveLabelBreakpoint,
+      adaptiveLabelBreakpoint: _adaptiveLabelBreakpoint,
       allowEmptyValue,
       autoFocus,
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
+      className,
       "data-element": dataElement,
       "data-role": dataRole,
       disabled,
       disablePortal = true,
-      helpAriaLabel,
+      helpAriaLabel: _helpAriaLabel,
+      error,
+      fieldHelp: _fieldHelp,
+      id,
+      inputHint,
+      info: _info,
+      label,
+      labelAlign: _labelAlign,
+      labelHelp: _labelHelp,
       labelInline,
+      labelSpacing: _labelSpacing,
       minDate,
       maxDate,
       onBlur,
@@ -136,20 +146,30 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       onFocus,
       onKeyDown,
       pickerProps,
+      prefix,
       readOnly,
+      required,
+      reverse: _reverse,
       size = "medium",
-      tooltipPosition,
+      tooltipPosition: _tooltipPosition,
+      tooltipId: _tooltipId,
       value,
       inputWidth,
-      labelWidth,
+      labelWidth: _labelWidth,
       maxWidth,
       inputName,
       onPickerClose,
       onPickerOpen,
       dateFormatOverride: dateFormatOverrideProp,
-      datePickerAriaLabel,
-      datePickerAriaLabelledBy,
+      datePickerAriaLabel: _datePickerAriaLabel,
+      datePickerAriaLabelledBy: _datePickerAriaLabelledBy,
       validationMessagePositionTop = true,
+      validationIconId: _validationIconId,
+      validationOnLabel: _validationOnLabel,
+      variant = "typical",
+      warning,
+      name,
+      yearRangeOffset,
       ...rest
     }: DateInputProps,
     ref,
@@ -175,57 +195,30 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       setInputRefMap,
       validationMessagePositionTop: validationMessagePositionTopContext,
     } = useContext(DateRangeContext);
-    const [open, setOpen] = useState(false);
-    const [selectedDays, setSelectedDays] = useState(() => {
-      const isValidDate = isValidLocaleDate(value, dateFnsLocale());
-      if (!isValidDate) {
-        return undefined;
-      }
-
-      return checkISOFormatAndLength(value)
-        ? parseISODate(value)
-        : parseDate(format, value);
+    const { open, setOpen, closePicker, togglePicker } = useDatePickerState({
+      onPickerOpen,
+      onPickerClose,
     });
-    const isInitialValue = useRef(true);
-    const pickerTabGuardId = useRef(guid());
+    const {
+      displayValue,
+      selectedDate,
+      createDateChangeEvent,
+      valueNeedsFormatting,
+      trackEditedValue,
+    } = useDateInputState({
+      allowEmptyValue,
+      format,
+      formats,
+      value,
+    });
+    const [pickerTabGuardId] = useState(() => guid());
+    const [pickerId] = useState(() => `date-picker-${guid()}`);
     const showValidationMessageOnTop =
       validationMessagePositionTopContext ?? validationMessagePositionTop;
 
     const { size: fieldsetSize } = useContext(FieldsetContext);
     const actualSize = fieldsetSize || size;
-
-    const computeInvalidRawValue = (inputValue: string) =>
-      allowEmptyValue && !inputValue.length ? inputValue : null;
-
-    const buildCustomEvent = (ev: CustomDateEvent) => {
-      const { id, name } = ev.target;
-
-      const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
-        ev.target.value,
-        formats,
-      );
-
-      const formattedValueString =
-        ev.type === "blur"
-          ? formattedValue(format, selectedDays)
-          : ev.target.value;
-      const rawValue = isDateValid(parseDate(matchedFormat, matchedValue))
-        ? formatToISO(...additionalYears(matchedFormat, matchedValue))
-        : computeInvalidRawValue(ev.target.value);
-
-      const customEvent = {
-        target: {
-          ...(name && { name }),
-          ...(id && { id }),
-          value: {
-            formattedValue: formattedValueString,
-            rawValue,
-          },
-        },
-      };
-
-      return customEvent;
-    };
+    const [inputId, uniqueName] = useUniqueId(id, name);
 
     const handleClickAway = () => {
       if (open) {
@@ -233,8 +226,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         internalInputRef.current?.focus();
         isBlurBlocked.current = false;
         internalInputRef.current?.blur();
-        setOpen(false);
-        onPickerClose?.();
+        closePicker();
         alreadyFocused.current = false;
       }
     };
@@ -245,8 +237,8 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
     );
 
     const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-      isInitialValue.current = false;
-      onChange(buildCustomEvent(ev));
+      trackEditedValue(ev.target.value);
+      onChange(createDateChangeEvent({ type: "change", target: ev.target }));
     };
 
     const focusInput = () => {
@@ -258,10 +250,9 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       day: Date,
       ev: React.MouseEvent<HTMLDivElement>,
     ) => {
-      setSelectedDays(day);
       onChange(
-        buildCustomEvent({
-          ...ev,
+        createDateChangeEvent({
+          type: "click",
           target: {
             ...ev.target,
             value: formattedValue(format, day),
@@ -269,7 +260,6 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         }),
       );
       focusInput();
-      setOpen(false);
     };
 
     const handleBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
@@ -277,35 +267,13 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
         return;
       }
 
-      let event: DateChangeEvent;
+      const event = createDateChangeEvent({
+        type: "blur",
+        target: ev.target,
+      });
 
-      if (isDateValid(selectedDays)) {
-        event = buildCustomEvent(ev);
-
-        const currentValue = checkISOFormatAndLength(value)
-          ? formattedValue(format, parseISODate(value))
-          : value;
-        const [, matchedValue] = findMatchedFormatAndValue(
-          currentValue,
-          formats,
-        );
-
-        if (formattedValue(format, selectedDays) !== matchedValue) {
-          onChange(event);
-        }
-      } else {
-        const { id, name } = ev.target;
-
-        event = {
-          target: {
-            ...(name && { name }),
-            ...(id && { id }),
-            value: {
-              formattedValue: ev.target.value,
-              rawValue: computeInvalidRawValue(ev.target.value),
-            },
-          },
-        };
+      if (isDateValid(selectedDate) && valueNeedsFormatting) {
+        onChange(event);
       }
 
       if (isBlurBlocked.current) {
@@ -336,29 +304,30 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
 
       if (open && Events.isTabKey(ev)) {
         if (Events.isShiftKey(ev)) {
-          setOpen(false);
-          onPickerClose?.();
+          closePicker();
         } else if (!disablePortal) {
           ev.preventDefault();
           (
-            document?.querySelector(
-              `[id="${pickerTabGuardId.current}"]`,
-            ) as HTMLElement
+            document?.querySelector(`[id="${pickerTabGuardId}"]`) as HTMLElement
           )?.focus();
         }
         alreadyFocused.current = false;
       }
     };
 
-    const handleClick = (
-      ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    ) => {
+    const handleClick = (ev: React.MouseEvent<HTMLElement>) => {
       if (onClick) {
         onClick(ev);
       }
+
+      if (variant === "typical" && open && disablePortal) {
+        closePicker();
+      }
     };
 
     const handleMouseDown = () => {
+      handleClickInside();
+
       if (setInputRefMap) {
         isBlurBlocked.current = true;
       }
@@ -368,20 +337,31 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       }
     };
 
-    const handleIconMouseDown = () => {
+    const handleTriggerClick = (ev: React.MouseEvent<HTMLElement>) => {
+      if (disabled || readOnly) {
+        return;
+      }
+
+      onClick?.(ev);
       isBlurBlocked.current = true;
       alreadyFocused.current = true;
 
-      if (open) {
-        setOpen(false);
-        onPickerClose?.();
-      } else {
-        setOpen(true);
-        onPickerOpen?.();
+      togglePicker();
+    };
+
+    const handleTriggerMouseDown = () => {
+      handleClickInside();
+
+      if (disabled || readOnly) {
+        return;
       }
+
+      isBlurBlocked.current = true;
+      alreadyFocused.current = true;
     };
 
     const handlePickerMouseDown = () => {
+      handleClickInside();
       isBlurBlocked.current = true;
     };
 
@@ -408,63 +388,9 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
           });
         }
       },
-      [inputName, inputRefMap, setInputRefMap, ref],
+      [inputName, inputRefMap, setInputRefMap, ref, setOpen],
     );
 
-    useEffect(() => {
-      const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
-        value,
-        formats,
-      );
-
-      if (
-        matchedFormat &&
-        matchedValue &&
-        isDateValid(parseDate(matchedFormat, matchedValue))
-      ) {
-        setSelectedDays(
-          parseDate(...additionalYears(matchedFormat, matchedValue)),
-        );
-      } else if (checkISOFormatAndLength(value) && isInitialValue.current) {
-        setSelectedDays(parseISODate(value));
-      } else {
-        setSelectedDays(undefined);
-      }
-    }, [value, formats]);
-
-    const computedValue = () => {
-      if (checkISOFormatAndLength(value) && isInitialValue.current) {
-        return formattedValue(format, parseISODate(value));
-      }
-
-      const valueSeparator = getSeparator(value);
-      const formatSeparator = getSeparator(format);
-      const replaceSeparators = () =>
-        value
-          .split("")
-          .map((char) => (char === valueSeparator ? formatSeparator : char))
-          .join("");
-
-      if (
-        isInitialValue.current &&
-        valueSeparator !== formatSeparator &&
-        isDateValid(parseDate(format, replaceSeparators()))
-      ) {
-        isInitialValue.current = false;
-
-        const [matchedFormat, matchedValue] = findMatchedFormatAndValue(
-          replaceSeparators(),
-          formats,
-        );
-        return formattedValue(
-          format,
-          parseDate(...additionalYears(matchedFormat, matchedValue)),
-        );
-      }
-
-      return value;
-    };
-
     const marginProps = filterStyledSystemMarginProps(rest);
 
     return (
@@ -481,52 +407,67 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
           "data-element": dataElement,
           "data-role": dataRole,
         })}
-        onMouseDown={handleClickInside}
-        className="date"
+        className={`date date-${variant}`}
       >
-        <Textbox
+        <TextInput
           {...filterOutStyledSystemSpacingProps(rest)}
+          aria-describedby={ariaDescribedBy}
+          aria-labelledby={ariaLabelledBy}
+          autoFocus={autoFocus}
+          className={className}
           data-component="date-input"
-          value={computedValue()}
+          data-role="date-input-wrapper"
+          disabled={disabled}
+          error={error}
+          id={inputId}
+          inputHint={inputHint}
+          inputIcon={
+            <DatePickerTrigger
+              disabled={disabled}
+              open={open}
+              pickerId={pickerId}
+              readOnly={readOnly}
+              size={actualSize}
+              variant={variant}
+              onClick={handleTriggerClick}
+              onMouseDown={handleTriggerMouseDown}
+            />
+          }
+          inputWidth={inputWidth}
+          label={label ?? ""}
+          labelInline={labelInline}
+          maxWidth={maxWidth ?? dateInputWidthBySize[actualSize]}
+          name={uniqueName}
           onBlur={handleBlur}
           onChange={handleChange}
           onClick={handleClick}
           onFocus={handleFocus}
           onKeyDown={handleKeyDown}
-          iconOnClick={handleClick}
           onMouseDown={handleMouseDown}
-          iconOnMouseDown={handleIconMouseDown}
-          inputIcon="calendar"
-          labelInline={labelInline}
+          prefix={prefix}
+          readOnly={readOnly}
           ref={assignInput}
-          adaptiveLabelBreakpoint={adaptiveLabelBreakpoint}
-          tooltipPosition={tooltipPosition}
-          helpAriaLabel={helpAriaLabel}
-          autoFocus={autoFocus}
+          required={required}
           size={actualSize}
-          disabled={disabled}
-          readOnly={readOnly}
-          inputWidth={inputWidth}
-          labelWidth={labelWidth}
-          maxWidth={maxWidth ?? datePickerWidth[actualSize]}
-          m={0}
           validationMessagePositionTop={showValidationMessageOnTop}
+          value={displayValue}
+          warning={warning}
         />
         <DatePicker
           disablePortal={disablePortal}
-          inputElement={parentRef}
-          pickerProps={pickerProps}
-          selectedDays={selectedDays}
+          inputContainerRef={parentRef}
+          dayPickerProps={pickerProps}
+          selectedDate={selectedDate}
           onDayClick={handleDayClick}
           minDate={minDate}
           maxDate={maxDate}
-          pickerMouseDown={handlePickerMouseDown}
+          onPickerMouseDown={handlePickerMouseDown}
           open={open}
-          setOpen={setOpen}
-          pickerTabGuardId={pickerTabGuardId.current}
-          onPickerClose={onPickerClose}
-          ariaLabel={datePickerAriaLabel}
-          ariaLabelledBy={datePickerAriaLabelledBy}
+          onRequestPickerClose={closePicker}
+          pickerTabGuardId={pickerTabGuardId}
+          pickerId={pickerId}
+          size={actualSize}
+          yearRangeOffset={yearRangeOffset}
         />
       </StyledDateInput>
     );
diff --git a/src/components/date/date.mdx b/src/components/date/date.mdx
index 8bd421a8ca..944fab6b95 100644
--- a/src/components/date/date.mdx
+++ b/src/components/date/date.mdx
@@ -17,12 +17,13 @@ import * as DateStories from "./date.stories";
 </a>
 
 - If the date is likely to be close to today (e.g. an invoice due date), then a datepicker may be useful. If the date is likely to be far in the past (e.g. a date of birth), then it may be better to use separate inputs for day, month, and year or use a NumeralDate component.
-- Field focus automatically opens the datepicker, but a user can key in dates too, which many users find more convenient, especially in financial applications.
+- Users can type a date directly or open the calendar. The typical variant uses a calendar button; the legacy variant retains its icon interaction.
 - Carbon handles a range of formats, like dd/mm/yyyy, dd/mm/yy, dd/mm, or dd. Configuration can be regional, and copes with space, slash, full stop, comma and colon as separators, as well as no separator at all.
 
 ## Contents
 
 - [Quick Start](#quick-start)
+- [Typical variant compatibility](#typical-variant-compatibility)
 - [Examples](#examples)
 - [Validation states](#validation-states)
 - [Props](#props)
@@ -34,6 +35,25 @@ import * as DateStories from "./date.stories";
 import DateInput from "carbon-react/lib/components/date";
 ```
 
+## Typical variant compatibility
+
+The `typical` variant is the default. Deprecated props remain part of the shared API to avoid a breaking type change, but the following legacy presentation props are no longer supported by either variant.
+
+| Deprecated prop           | Behavior                                             | Replacement                                               |
+| ------------------------- | ---------------------------------------------------- | --------------------------------------------------------- |
+| `adaptiveLabelBreakpoint` | Not supported; layout is controlled by `labelInline` | Handle responsive layout in the implementation            |
+| `fieldHelp`               | Not supported                                        | `inputHint`                                               |
+| `labelHelp`               | Not supported                                        | `inputHint`                                               |
+| `helpAriaLabel`           | Not supported                                        | Use an explicit label and `inputHint`                     |
+| `info`                    | Not supported                                        | Use `inputHint`, `warning`, or `error` as appropriate     |
+| `labelSpacing`            | Not supported; typical uses token-defined spacing    | Typical layout tokens                                     |
+| `labelWidth`              | Not supported; typical uses token-defined dimensions | `inputWidth` or `maxWidth` where appropriate              |
+| `reverse`                 | Not supported                                        | Standard typical layout                                   |
+| `tooltipId`               | Not supported                                        | `inputHint`                                               |
+| `tooltipPosition`         | Not supported                                        | Inline `inputHint`, `warning`, or `error` content         |
+| `validationIconId`        | Not supported                                        | Inline validation message ids are generated automatically |
+| `validationOnLabel`       | Not supported                                        | Inline `warning` or `error` messages                      |
+
 ## Examples
 
 ### Default
@@ -65,15 +85,11 @@ be used to set the input value like in the example below, although the component
 
 <Canvas of={DateStories.Empty} />
 
-### With disabled dates
-
-You can configure the available dates by passing a `minDate` and `maxDate` prop to the component.
-
-<Canvas of={DateStories.DisabledDates} />
+### Disabled dates in calendar
 
-Another way to disable dates is by passing the `disabled` prop through the `pickerProps` prop directly to the DayPicker. The `disabled` prop accepts either a matcher or an array of [matchers](https://daypicker.dev/api/type-aliases/Matcher#example).
+Disable calendar dates by passing a matcher or an array of [matchers](https://daypicker.dev/api/type-aliases/Matcher#example) to `pickerProps.disabled`. This example disables Saturdays and Sundays.
 
-<Canvas of={DateStories.DisabledDatesUsingPickerProps} />
+<Canvas of={DateStories.DisabledDatesInCalendar} />
 
 ### With custom width
 
@@ -81,9 +97,11 @@ You can use the `maxWidth` prop to set a custom width for the date input, with a
 
 <Canvas of={DateStories.WithCustomWidth} />
 
-### With disabled portal
+### Without portal (deprecated)
 
-<Canvas of={DateStories.WithDisabledPortal} />
+The deprecated `disablePortal` prop renders the calendar in the Date Input's local DOM tree instead of through a portal. It remains supported for existing legacy and typical consumers, but should not be used in new implementations.
+
+<Canvas of={DateStories.WithoutPortal} />
 
 ### Required
 
@@ -93,8 +111,11 @@ You can use the `required` prop to indicate if the field is mandatory.
 
 ### Locale override
 
-The examples below illustrate how to override the locale passed into the Date component. The first example has been set up for
-the German (`de`) locale whilst the second is for a Chinese (`zh-CN`) locale. 
+The examples below illustrate how to override the locale passed into the Date component. They show German (`de-DE`), Chinese
+(`zh-CN`), Polish (`pl-PL`), and British English (`en-GB`) locale configuration. Locale values are merged with `en-GB`, so omitted
+keys fall back to British English. Applications serving users in another language should provide approved translations through
+`I18nProvider`, including the calendar controls announced by assistive technology: `openCalendarButton`, `previousMonthButton`,
+`nextMonthButton`, `chooseMonth`, `chooseYear`, and `closeButton`.
 
 Required locales can be imported from date-fns like so: `import { de, zhCN } from 'date-fns/locale';`
 
@@ -102,9 +123,9 @@ Required locales can be imported from date-fns like so: `import { de, zhCN } fro
 
 ### Locale format override
 
-You can also override the default date format for a specific locale by passing a `dateFormatOverride` prop to the `DateInput` component or alternatively, 
-you can use the `date.dateFormatOverride` translation key. 
-The example below demonstrates how you can override the default date format for the German locale (`dd.MM.yyyy`), please note that the prop will take precedence over the translation key.
+You can also override the default date format for a specific locale by passing a `dateFormatOverride` prop to the `DateInput` component or alternatively,
+you can use the `date.dateFormatOverride` translation key.
+The example uses a German locale with a `yyyy-MM-dd` translation-key format. The second field also passes `dateFormatOverride="dd/MM/yyyy"`, demonstrating that the component prop takes precedence over the translation key. Users should see the same date represented as `2019-04-05` in the first field and `05/04/2019` in the second.
 
 <Canvas of={DateStories.LocaleFormatOverrideExampleImplementation} />
 
@@ -113,19 +134,25 @@ The example below demonstrates how you can override the default date format for
 Use the `labelInline` prop to display the label on the same horizontal row as the input. You can adjust its appearance using the `labelWidth` and
 `labelAlign` props to control the width and text alignment of the label and the `inputWidth` prop to control the width of the input.
 
-**Note:** This is a legacy feature and will only render if the `validationRedesignOptIn` feature flag on an ancestor [CarbonProvider](../?path=/docs/carbon-provider--docs) is *false*.
+**Note:** This is a legacy feature and will only render if the `validationRedesignOptIn` feature flag on an ancestor [CarbonProvider](../?path=/docs/carbon-provider--docs) is _false_.
 
 <Canvas of={DateStories.WithLabelInline} />
 
-### With fieldHelp (legacy)
+## Validation States
+
+This component supports input validation, see our [Validations](../?path=/docs/documentation-validations--docs) documentation page for more information.
 
-**Note:** This is a legacy feature and will only render if the `validationRedesignOptIn` feature flag on an ancestor [CarbonProvider](../?path=/docs/carbon-provider--docs) is *false*.
+### Error
 
-<Canvas of={DateStories.WithFieldHelp} />
+Use `error` when the user must correct the value. Validation messages may be positioned above or below the input.
 
-## Validation States
+<Canvas of={DateStories.WithError} />
 
-This component supports input validation, see our [Validations](../?path=/docs/documentation-validations--docs) documentation page for more information.
+### Caution
+
+Use `warning` when the user should review the value but correction is optional.
+
+<Canvas of={DateStories.WithCaution} />
 
 ## Props
 
@@ -180,8 +207,7 @@ The following keys are available to override the translations for this component
     },
     {
       name: "date.dateFormatOverride",
-      description:
-        "Override the default date format for a specific locale.",
+      description: "Override the default date format for a specific locale.",
       type: "func",
       returnType: "string",
     },
diff --git a/src/components/date/date.pw.tsx b/src/components/date/date.pw.tsx
index 94afdbf050..fab15c1dca 100644
--- a/src/components/date/date.pw.tsx
+++ b/src/components/date/date.pw.tsx
@@ -3,22 +3,19 @@ import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat.js";
 import { test, expect } from "../../../playwright/helpers/base-test";
 import {
-  DateInputCustom,
-  DateInputValidationNewDesign,
-  WithSiblingButton,
+  DateInputLegacyControlled,
+  DateInputTypicalControlled,
+  DateInputValidationStates,
+  DateInputWithNextFocusableElement,
   DateInputInsideDialog,
 } from "./components.test-pw";
 import { getDataElementByValue } from "../../../playwright/components";
 import {
-  verifyRequiredAsteriskForLabel,
   checkAccessibility,
   containsClass,
 } from "../../../playwright/support/helper";
 import { CHARACTERS } from "../../../playwright/support/constants";
-import {
-  dayPickerWrapper,
-  dayPickerHeading,
-} from "../../../playwright/components/date-input/index";
+import { dayPickerWrapper } from "../../../playwright/components/date-input/index";
 
 dayjs.extend(advancedFormat);
 
@@ -28,37 +25,39 @@ const DATE_INPUT = dayjs("2022-05-01").format("DD/MM/YYYY");
 const TODAY_DATE_INPUT = dayjs().format("DD/MM/YYYY");
 const NEXT_MONTH = dayjs("2022-05-01").add(1, "months").format("MMMM YYYY");
 const ACTUAL_MONTH = dayjs("2022-05-01").format("MMMM YYYY");
-const PREVIOUS_MONTH = dayjs("2022-05-01")
-  .subtract(1, "months")
-  .format("MMMM YYYY");
 const MIN_DATE = "04/04/2030";
 const DAY_BEFORE_MIN_DATE = "Wednesday, April 3rd, 2030";
 const DAY_AFTER_MAX_DATE = "Friday, April 5th, 2030";
-const arrowKeys = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
 
 test.describe("Functionality tests", () => {
-  testData.forEach((fieldHelp) => {
-    test(`should check the fieldHelp renders ${fieldHelp}`, async ({
+  [
+    { size: "small", width: "128px", height: "32px" },
+    { size: "medium", width: "144px", height: "40px" },
+    { size: "large", width: "176px", height: "48px" },
+  ].forEach(({ size, width, height }) => {
+    test(`should render the ${size} date input at ${width} by ${height}`, async ({
       mount,
       page,
     }) => {
-      await mount(<DateInputCustom fieldHelp={fieldHelp} />);
-
-      const helpPreview = getDataElementByValue(page, "help");
-      await expect(helpPreview).toHaveText(fieldHelp);
-    });
-  });
-
-  testData.forEach((label) => {
-    test(`should check the label renders ${label}`, async ({ mount, page }) => {
-      await mount(<DateInputCustom label={label} />);
+      await mount(
+        <DateInputTypicalControlled
+          size={size as "small" | "medium" | "large"}
+        />,
+      );
 
-      await expect(getDataElementByValue(page, "label")).toHaveText(label);
+      await expect(page.locator('[data-role="input-wrapper"]')).toHaveCSS(
+        "width",
+        width,
+      );
+      await expect(page.locator('[data-role="input-container"]')).toHaveCSS(
+        "height",
+        height,
+      );
     });
   });
 
   test(`should check the minDate prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom minDate="2030-04-04" />);
+    await mount(<DateInputLegacyControlled minDate="2030-04-04" />);
 
     const input = getDataElementByValue(page, "input");
     await input.fill(MIN_DATE);
@@ -66,14 +65,14 @@ test.describe("Functionality tests", () => {
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    const dayPicker = page.locator(
-      `button[aria-label="${DAY_BEFORE_MIN_DATE}"]`,
-    );
-    await expect(dayPicker).toHaveAttribute("disabled", "");
+    const dayPicker = page.getByRole("button", {
+      name: DAY_BEFORE_MIN_DATE,
+    });
+    await expect(dayPicker).toBeDisabled();
   });
 
   test(`should check the maxDate prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom maxDate="2030-04-04" />);
+    await mount(<DateInputLegacyControlled maxDate="2030-04-04" />);
 
     const input = getDataElementByValue(page, "input");
     await input.fill(MIN_DATE);
@@ -81,19 +80,18 @@ test.describe("Functionality tests", () => {
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    const dayPicker = page.locator(
-      `button[aria-label="${DAY_AFTER_MAX_DATE}"]`,
-    );
-    await expect(dayPicker).toHaveAttribute("disabled", "");
+    const dayPicker = page.getByRole("button", {
+      name: DAY_AFTER_MAX_DATE,
+    });
+    await expect(dayPicker).toBeDisabled();
   });
 
   test(`should check the date is set to today's day`, async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom />);
+    await mount(<DateInputLegacyControlled />);
 
-    const dayClass = `rdp-day rdp-today`;
     const input = getDataElementByValue(page, "input");
     await input.fill(TODAY_DATE_INPUT);
 
@@ -106,60 +104,89 @@ test.describe("Functionality tests", () => {
     });
 
     await expect(todayButton).toBeVisible();
-    await containsClass(todayCell, dayClass);
+    await containsClass(todayCell, "rdp-day");
+    await containsClass(todayCell, "rdp-today");
   });
 
-  test(`should not open dayPicker after click on input`, async ({
+  test("completes a typical keyboard selection journey", async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom />);
+    await mount(<DateInputTypicalControlled value="01/05/2022" />);
 
-    const inputParent = getDataElementByValue(page, "input").locator("..");
-    await inputParent.click();
+    const input = page.getByRole("textbox", { name: "Date" });
+    await page.getByRole("button", { name: "Open calendar" }).click();
 
-    const wrapper = dayPickerWrapper(page);
-    await expect(wrapper).toBeHidden();
-  });
+    await expect(
+      page.getByRole("button", {
+        name: "Sunday, May 1st, 2022, selected",
+      }),
+    ).toBeFocused();
 
-  test(`should not close dayPicker after double click on input`, async ({
-    mount,
-    page,
-  }) => {
-    await mount(<DateInputCustom />);
-
-    const calendarIcon = page.getByTestId("icon");
-    await calendarIcon.click();
+    await page
+      .getByRole("combobox", { name: "Choose the month" })
+      .selectOption({ label: "June" });
 
-    const inputParent = getDataElementByValue(page, "input").locator("..");
-    await inputParent.click();
-    await inputParent.click();
+    await page
+      .getByRole("button", { name: "Wednesday, June 15th, 2022" })
+      .press("Enter");
 
-    const wrapper = dayPickerWrapper(page);
-    await expect(wrapper).toBeVisible();
+    await expect(input).toHaveValue("15/06/2022");
+    await expect(input).toBeFocused();
+    await expect(page.getByRole("dialog")).toBeHidden();
   });
 
-  test(`should open dayPicker after click on icon`, async ({ mount, page }) => {
-    await mount(<DateInputCustom />);
+  [true, false].forEach((disablePortal) => {
+    test(`closes the typical ${
+      disablePortal ? "non-portalled" : "portalled"
+    } date picker when clicking outside the input and picker after keyboard navigation`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <DateInputTypicalControlled
+          value="01/05/2022"
+          disablePortal={disablePortal}
+        />,
+      );
 
-    const calendarIcon = page.getByTestId("icon");
-    await calendarIcon.click();
-    const wrapper = dayPickerWrapper(page);
-    await expect(wrapper).toBeVisible();
-  });
+      await page.getByRole("button", { name: "Open calendar" }).click();
 
-  test(`should close dayPicker after click on icon when dayPicker is open`, async ({
-    mount,
-    page,
-  }) => {
-    await mount(<DateInputCustom />);
+      const datePicker = page.getByTestId("date-picker");
+      await expect(datePicker).toBeVisible();
 
-    const calendarIcon = getDataElementByValue(page, "calendar");
-    await calendarIcon.click();
+      const selectedDay = page.getByRole("button", {
+        name: "Sunday, May 1st, 2022, selected",
+      });
+      await expect(selectedDay).toBeFocused();
+      for (const key of [
+        "ArrowDown",
+        "ArrowDown",
+        "ArrowDown",
+        "ArrowDown",
+        "ArrowUp",
+        "ArrowLeft",
+      ]) {
+        await page.keyboard.press(key);
+      }
+
+      const dateWrapper = page.locator('[data-component="date"]');
+      const wrapperBox = (await dateWrapper.boundingBox()) as {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      };
+      // Click near the bottom-right edge of the wrapper — inside the wrapper
+      // boundary but outside the text input and picker, to verify the
+      // click-away handler closes the picker in this scenario.
+      await page.mouse.click(
+        wrapperBox.x + wrapperBox.width - 8,
+        wrapperBox.y + wrapperBox.height - 8,
+      );
 
-    await calendarIcon.click();
-    const wrapper = dayPickerWrapper(page);
-    await expect(wrapper).toBeHidden();
+      await expect(datePicker).toBeHidden();
+    });
   });
 
   [
@@ -170,25 +197,25 @@ test.describe("Functionality tests", () => {
       mount,
       page,
     }) => {
-      await mount(<DateInputCustom mt={`${margin}px`} />);
+      await mount(<DateInputLegacyControlled mt={`${margin}px`} />);
 
       const calendarIcon = page.getByTestId("icon");
       await calendarIcon.click();
 
-      const wrapperParent = dayPickerWrapper(page).locator("..");
-      await expect(wrapperParent).toHaveAttribute(
+      const floatingDatePicker = page.locator("[data-floating-placement]");
+      await expect(floatingDatePicker).toHaveAttribute(
         "data-floating-placement",
         `${position}-start`,
       );
-      await expect(wrapperParent).toBeVisible();
+      await expect(floatingDatePicker).toBeVisible();
     });
   });
 
-  test("should use chevron_right arrow in DayPicker to verify next month is shown", async ({
+  test("should use the month selector to show the next month", async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom />);
+    await mount(<DateInputLegacyControlled />);
 
     const input = getDataElementByValue(page, "input");
     await input.fill(DATE_INPUT);
@@ -196,17 +223,18 @@ test.describe("Functionality tests", () => {
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    const arrowElement = getDataElementByValue(page, "chevron_right");
-    await arrowElement.click();
-    const pickerHeading = dayPickerHeading(page);
-    await expect(pickerHeading).toHaveText(NEXT_MONTH);
+    const monthSelector = page.getByRole("combobox", {
+      name: "Choose the month",
+    });
+    await monthSelector.selectOption({ label: "June" });
+    await expect(monthSelector).toHaveValue("5");
   });
 
-  test("should use chevron_left arrow in DayPicker to verify previous month is shown", async ({
+  test("should use the year selector to show a different year", async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom />);
+    await mount(<DateInputLegacyControlled />);
 
     const input = getDataElementByValue(page, "input");
     await input.fill(DATE_INPUT);
@@ -214,60 +242,49 @@ test.describe("Functionality tests", () => {
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    const arrowElement = getDataElementByValue(page, "chevron_left");
-    await arrowElement.click();
-    const pickerHeading = dayPickerHeading(page);
-    await expect(pickerHeading).toHaveText(PREVIOUS_MONTH);
-  });
-
-  arrowKeys.forEach((key) => {
-    test(`should not change the displayed month when ${key} is pressed and next button is focused`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DateInputCustom value="01/05/2022" />);
-
-      const calendarIcon = page.getByTestId("icon");
-      await calendarIcon.click();
-
-      const datePicker = page.getByTestId("date-picker");
-      await datePicker.waitFor();
-
-      const nextMonthButton = page.getByRole("button", { name: "Next month" });
-      await nextMonthButton.press(key);
-
-      const pickerHeading = datePicker.getByRole("status");
-      await expect(pickerHeading).toHaveText("May 2022");
+    const yearSelector = page.getByRole("combobox", {
+      name: "Choose the year",
     });
+    await yearSelector.selectOption({ label: "2023" });
+    await expect(yearSelector).toHaveValue("2023");
   });
 
-  arrowKeys.forEach((key) => {
-    test(`should not change the displayed month when ${key} is pressed and previous button is focused`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<DateInputCustom value="01/05/2022" />);
-
-      const calendarIcon = page.getByTestId("icon");
-      await calendarIcon.click();
-
-      const nextMonthButton = page.getByRole("button", { name: "Next month" });
-      await nextMonthButton.waitFor();
+  test("limits the customizable year picker to twelve visible options", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DateInputTypicalControlled value="01/05/2022" />);
 
-      await nextMonthButton.focus();
-      await nextMonthButton.press(key);
+    await page.getByRole("button", { name: "Open calendar" }).click();
+    const yearSelector = page.getByRole("combobox", {
+      name: "Choose the year",
+    });
 
-      const datePicker = page.getByTestId("date-picker");
-      const pickerHeading = datePicker.getByRole("status");
-      await expect(pickerHeading).toHaveText("May 2022");
+    const pickerStyles = await yearSelector.evaluate((selector) => {
+      const picker = getComputedStyle(selector, "::picker(select)");
+      return {
+        maxBlockSize: Number.parseFloat(picker.maxBlockSize),
+        optionBlockSize: Number.parseFloat(
+          picker.getPropertyValue("--calendar-select-option-block-size"),
+        ),
+        paddingBlock: Number.parseFloat(
+          picker.getPropertyValue("--calendar-select-picker-padding-block"),
+        ),
+        overflowY: picker.overflowY,
+      };
     });
+
+    expect(pickerStyles.maxBlockSize).toBe(
+      12 * pickerStyles.optionBlockSize + 2 * pickerStyles.paddingBlock,
+    );
+    expect(pickerStyles.overflowY).toBe("auto");
   });
 
   test(`should allow a user to tab into the picker and through its controls`, async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="12/12/2022" />);
+    await mount(<DateInputLegacyControlled value="12/12/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
@@ -275,30 +292,30 @@ test.describe("Functionality tests", () => {
     const dayPicker = page.getByTestId("date-picker");
     await dayPicker.waitFor();
 
-    await page.keyboard.press("Tab");
-    const previousMonthButton = page.getByRole("button", {
-      name: "Previous month",
+    const dayButton = page.getByRole("button", {
+      name: "Monday, December 12th, 2022, selected",
     });
-    await expect(previousMonthButton).toBeFocused();
+    await expect(dayButton).toBeFocused();
 
     await page.keyboard.press("Tab");
-    const nextMonthButton = page.getByRole("button", {
-      name: "Next month",
-    });
-    await expect(nextMonthButton).toBeFocused();
+    await expect(page.getByRole("button", { name: "Close" })).toBeFocused();
 
     await page.keyboard.press("Tab");
-    const dayButton = page.getByRole("button", {
-      name: "Monday, December 12th, 2022",
-    });
-    await expect(dayButton).toBeFocused();
+    await expect(
+      page.getByRole("combobox", { name: "Choose the month" }),
+    ).toBeFocused();
+
+    await page.keyboard.press("Tab");
+    await expect(
+      page.getByRole("combobox", { name: "Choose the year" }),
+    ).toBeFocused();
   });
 
-  test(`should close the picker and focus the next element in the DOM when focus is on a day element and tab pressed`, async ({
+  test(`should focus the close button when focus is on a day element and Tab is pressed`, async ({
     mount,
     page,
   }) => {
-    await mount(<WithSiblingButton value="01/05/2022" />);
+    await mount(<DateInputWithNextFocusableElement value="01/05/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
@@ -311,29 +328,22 @@ test.describe("Functionality tests", () => {
     });
     await dayButton.press("Tab");
 
-    const fooButton = page.getByRole("button", { name: "foo" });
-    await expect(dayPicker).toBeHidden();
-    await expect(fooButton).toBeFocused();
+    await expect(dayPicker).toBeVisible();
+    await expect(page.getByRole("button", { name: "Close" })).toBeFocused();
   });
 
   test(`should focus today's date if no day selected when tabbing to day elements`, async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="" />);
+    await mount(<DateInputLegacyControlled value="" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    await page.getByLabel("Date").press("Tab");
-
     const todayButton = page.getByRole("button", { name: `Today, ${TODAY}` });
     await todayButton.waitFor();
 
-    await page
-      .getByRole("button", { name: "Next month", exact: true })
-      .press("Tab");
-
     await expect(todayButton).toBeFocused();
   });
 
@@ -341,20 +351,15 @@ test.describe("Functionality tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="14/04/2022" />);
+    await mount(<DateInputLegacyControlled value="14/04/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
-    await page.getByLabel("Date").press("Tab");
-
     const datePicker = page.getByTestId("date-picker");
     await datePicker.waitFor();
 
-    await page
-      .getByRole("button", { name: "Next month", exact: true })
-      .press("Tab");
     const day14Button = page.getByRole("button", {
-      name: "Thursday, April 14th, 2022",
+      name: "Thursday, April 14th, 2022, selected",
     });
     await expect(day14Button).toBeFocused();
 
@@ -384,11 +389,11 @@ test.describe("Functionality tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="01/04/2022" />);
+    await mount(<DateInputLegacyControlled value="01/04/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
-    await page.getByLabel("Date").press("Tab");
+    await page.getByLabel("Date", { exact: true }).press("Tab");
 
     const datePicker = page.getByTestId("date-picker");
     await datePicker.waitFor();
@@ -405,19 +410,20 @@ test.describe("Functionality tests", () => {
 
     await expect(day31Button).toBeFocused();
 
-    const pickerHeading = datePicker.getByRole("status");
-    await expect(pickerHeading).toHaveText("March 2022");
+    await expect(
+      page.getByRole("dialog", { name: "Choose a date" }),
+    ).toBeVisible();
   });
 
   test(`navigates to previous month, when up arrow is pressed on a day button if a previous-month day is displayed above`, async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="04/04/2022" />);
+    await mount(<DateInputLegacyControlled value="04/04/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
-    await page.getByLabel("Date").press("Tab");
+    await page.getByLabel("Date", { exact: true }).press("Tab");
 
     const datePicker = page.getByTestId("date-picker");
     await datePicker.waitFor();
@@ -434,19 +440,20 @@ test.describe("Functionality tests", () => {
 
     await expect(day28Button).toBeFocused();
 
-    const pickerHeading = datePicker.getByRole("status");
-    await expect(pickerHeading).toHaveText("March 2022");
+    await expect(
+      page.getByRole("dialog", { name: "Choose a date" }),
+    ).toBeVisible();
   });
 
   test("navigates to previous month, when down arrow is pressed on a day button if a previous-month day is displayed below", async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="24/04/2022" />);
+    await mount(<DateInputLegacyControlled value="24/04/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
-    await page.getByLabel("Date").press("Tab");
+    await page.getByLabel("Date", { exact: true }).press("Tab");
 
     const datePicker = page.getByTestId("date-picker");
     await datePicker.waitFor();
@@ -463,8 +470,9 @@ test.describe("Functionality tests", () => {
 
     await expect(day1Button).toBeFocused();
 
-    const pickerHeading = datePicker.getByRole("status");
-    await expect(pickerHeading).toHaveText("May 2022");
+    await expect(
+      page.getByRole("dialog", { name: "Choose a date" }),
+    ).toBeVisible();
   });
 
   ["Enter", "Space"].forEach((key) => {
@@ -472,12 +480,12 @@ test.describe("Functionality tests", () => {
       mount,
       page,
     }) => {
-      await mount(<DateInputCustom value="14/04/2022" />);
+      await mount(<DateInputLegacyControlled value="14/04/2022" />);
 
       const calendarIcon = page.getByTestId("icon");
       await calendarIcon.click();
 
-      const dateInput = page.getByLabel("Date");
+      const dateInput = page.getByLabel("Date", { exact: true });
       await dateInput.press("Tab");
 
       const datePicker = page.getByTestId("date-picker");
@@ -496,12 +504,12 @@ test.describe("Functionality tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom value="31/05/2022" />);
+    await mount(<DateInputLegacyControlled value="31/05/2022" />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    await page.getByLabel("Date").press("Tab");
+    await page.getByLabel("Date", { exact: true }).press("Tab");
 
     const datePicker = page.getByTestId("date-picker");
     await datePicker.waitFor();
@@ -518,95 +526,16 @@ test.describe("Functionality tests", () => {
 
     await expect(day1Button).toBeFocused();
 
-    const pickerHeading = datePicker.getByRole("status");
-    await expect(pickerHeading).toHaveText("June 2022");
-  });
-
-  test("should change to next month when Enter is pressed and next button is focused", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<DateInputCustom />);
-
-    const calendarIcon = page.getByTestId("icon");
-    await calendarIcon.click();
-
-    const arrowParent = getDataElementByValue(page, "chevron_right").locator(
-      "..",
-    );
-    await arrowParent.focus();
-    const arrowElement = getDataElementByValue(page, "chevron_right");
-    await arrowElement.press("Enter");
-
-    const pickerHeading = dayPickerHeading(page);
-    await expect(pickerHeading).toHaveText(NEXT_MONTH);
-  });
-
-  test("should change to next month when Space is pressed and next button is focused", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<DateInputCustom />);
-
-    const calendarIcon = page.getByTestId("icon");
-    await calendarIcon.click();
-
-    const arrowParent = getDataElementByValue(page, "chevron_right").locator(
-      "..",
-    );
-    await arrowParent.focus();
-    const arrowElement = getDataElementByValue(page, "chevron_right");
-    await arrowElement.press("Space");
-
-    const pickerHeading = dayPickerHeading(page);
-    await expect(pickerHeading).toHaveText(NEXT_MONTH);
-  });
-
-  test("should change to previous month when Enter is pressed and previous button is focused", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<DateInputCustom />);
-
-    const calendarIcon = page.getByTestId("icon");
-    await calendarIcon.click();
-
-    const arrowParent = getDataElementByValue(page, "chevron_left").locator(
-      "..",
-    );
-    await arrowParent.focus();
-    const arrowElement = getDataElementByValue(page, "chevron_left");
-    await arrowElement.press("Enter");
-
-    const pickerHeading = dayPickerHeading(page);
-    await expect(pickerHeading).toHaveText(PREVIOUS_MONTH);
-  });
-
-  test("should change to previous month when Space is pressed and previous button is focused", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<DateInputCustom />);
-
-    const calendarIcon = page.getByTestId("icon");
-    await calendarIcon.click();
-
-    const arrowParent = getDataElementByValue(page, "chevron_left").locator(
-      "..",
-    );
-    await arrowParent.focus();
-    const arrowElement = getDataElementByValue(page, "chevron_left");
-    await arrowElement.press("Space");
-
-    const pickerHeading = dayPickerHeading(page);
-    await expect(pickerHeading).toHaveText(PREVIOUS_MONTH);
+    await expect(
+      page.getByRole("dialog", { name: "Choose a date" }),
+    ).toBeVisible();
   });
 
   test(`when maxWidth has no value it should render as 100%`, async ({
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom inputWidth={100} maxWidth="" />);
+    await mount(<DateInputLegacyControlled inputWidth={100} maxWidth="" />);
 
     const inputParent = getDataElementByValue(page, "input")
       .locator("..")
@@ -614,55 +543,22 @@ test.describe("Functionality tests", () => {
     await expect(inputParent).toHaveCSS("max-width", "100%");
   });
 
-  test(`should render Date with disabled prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom disabled />);
-
-    const input = getDataElementByValue(page, "input");
-    await expect(input).toBeDisabled();
-  });
-
-  test(`should render Date with read only prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom readOnly />);
-
-    const input = getDataElementByValue(page, "input");
-    await expect(input).not.toBeEditable();
-  });
-
   test(`should check the pickerProps prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom pickerProps={{ numberOfMonths: 2 }} />);
+    await mount(
+      <DateInputLegacyControlled pickerProps={{ numberOfMonths: 2 }} />,
+    );
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
 
-    const months = page.locator("div[class=rdp-month]");
+    const months = page.getByRole("grid");
     await expect(months).toHaveCount(2);
-    const pickerHeading1 = page
-      .locator(".rdp-month_caption")
-      .locator("span")
-      .nth(0);
-    await expect(pickerHeading1).toBeVisible();
+    const pickerHeading1 = page.getByText(ACTUAL_MONTH, { exact: true });
     await expect(pickerHeading1).toHaveText(ACTUAL_MONTH);
-    const pickerHeading2 = page
-      .locator(".rdp-month_caption")
-      .locator("span")
-      .nth(1);
-    await expect(pickerHeading2).toBeVisible();
+    const pickerHeading2 = page.getByText(NEXT_MONTH, { exact: true });
     await expect(pickerHeading2).toHaveText(NEXT_MONTH);
   });
 
-  test(`should check the required prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom required />);
-
-    await verifyRequiredAsteriskForLabel(page);
-  });
-
-  test(`should check the autofocus prop`, async ({ mount, page }) => {
-    await mount(<DateInputCustom autoFocus />);
-
-    const input = getDataElementByValue(page, "input");
-    await expect(input).toBeFocused();
-  });
-
   test("date picker does not float above the rest of the page, when disablePortal prop is true", async ({
     mount,
     page,
@@ -676,7 +572,7 @@ test.describe("Functionality tests", () => {
           border: "1px solid black",
         }}
       >
-        <DateInputCustom disablePortal />
+        <DateInputLegacyControlled disablePortal />
       </div>,
     );
 
@@ -699,7 +595,7 @@ test.describe("Functionality tests", () => {
           border: "1px solid black",
         }}
       >
-        <DateInputCustom disablePortal={false} />
+        <DateInputLegacyControlled disablePortal={false} />
       </div>,
     );
 
@@ -718,7 +614,7 @@ test.describe("When nested inside of a Dialog component", () => {
   }) => {
     await mount(<DateInputInsideDialog />);
 
-    const calendarIcon = getDataElementByValue(page, "calendar");
+    const calendarIcon = getDataElementByValue(page, "calendar_today");
     await calendarIcon.click();
 
     const datePicker = page.getByTestId("date-picker");
@@ -726,8 +622,8 @@ test.describe("When nested inside of a Dialog component", () => {
 
     await datePicker.press("Escape");
 
-    await expect(page.getByRole("dialog")).toBeVisible();
     await expect(datePicker).toBeHidden();
+    await expect(page.getByRole("dialog", { name: "Dialog" })).toBeVisible();
   });
 });
 
@@ -736,7 +632,7 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom />);
+    await mount(<DateInputLegacyControlled />);
 
     const calendarIcon = page.getByTestId("icon");
     await calendarIcon.click();
@@ -748,7 +644,7 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom autoFocus />);
+    await mount(<DateInputLegacyControlled autoFocus />);
 
     await checkAccessibility(page);
   });
@@ -757,7 +653,7 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom disabled />);
+    await mount(<DateInputLegacyControlled disabled />);
 
     await checkAccessibility(page);
   });
@@ -766,7 +662,7 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom readOnly />);
+    await mount(<DateInputLegacyControlled readOnly />);
 
     await checkAccessibility(page);
   });
@@ -776,7 +672,7 @@ test.describe("Accessibility tests", () => {
       mount,
       page,
     }) => {
-      await mount(<DateInputCustom fieldHelp={fieldHelp} />);
+      await mount(<DateInputLegacyControlled fieldHelp={fieldHelp} />);
 
       await checkAccessibility(page);
     });
@@ -786,7 +682,7 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom required />);
+    await mount(<DateInputLegacyControlled required />);
 
     await checkAccessibility(page);
   });
@@ -795,7 +691,7 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputValidationNewDesign />);
+    await mount(<DateInputValidationStates />);
 
     await checkAccessibility(page);
   });
@@ -804,10 +700,48 @@ test.describe("Accessibility tests", () => {
     mount,
     page,
   }) => {
-    await mount(<DateInputCustom />);
+    await mount(<DateInputLegacyControlled />);
+
+    const input = getDataElementByValue(page, "input");
+    await input.click();
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility when the typical picker is open", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DateInputTypicalControlled />);
+
+    await page.getByRole("button", { name: "Open calendar" }).click();
+    await expect(page.getByRole("dialog")).toBeVisible();
+
+    await checkAccessibility(page);
+  });
+
+  test("should check accessibility when the typical picker is open with range modifiers", async ({
+    mount,
+    page,
+  }) => {
+    const today = new Date();
+    const rangeEnd = new Date(today);
+    rangeEnd.setDate(today.getDate() + 7);
+
+    await mount(
+      <DateInputTypicalControlled
+        pickerProps={{
+          modifiers: {
+            range_start: today,
+            range_middle: { after: today, before: rangeEnd },
+            range_end: rangeEnd,
+          },
+        }}
+      />,
+    );
+
+    await page.getByRole("button", { name: "Open calendar" }).click();
+    await expect(page.getByRole("dialog")).toBeVisible();
 
-    const inputParent = getDataElementByValue(page, "input").locator("..");
-    await inputParent.click();
     await checkAccessibility(page);
   });
 });
diff --git a/src/components/date/date.stories.tsx b/src/components/date/date.stories.tsx
index 87521192bb..dded10f300 100644
--- a/src/components/date/date.stories.tsx
+++ b/src/components/date/date.stories.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { action } from "storybook/actions";
-import { zhCN, de } from "date-fns/locale";
+import { format, startOfDay, subDays } from "date-fns";
+import { zhCN, de, enGB, pl } from "date-fns/locale";
 
 import generateStyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
@@ -9,6 +10,7 @@ import DateInput, { DateChangeEvent, DateInputProps } from "./date.component";
 import Box from "../box";
 import Button from "../button";
 import I18nProvider from "../i18n-provider";
+import Typography from "../typography";
 
 const styledSystemProps = generateStyledSystemProps({
   margin: true,
@@ -17,12 +19,14 @@ const styledSystemProps = generateStyledSystemProps({
 const meta: Meta<typeof DateInput> = {
   title: "Date Input",
   component: DateInput,
+  tags: ["!autodocs"],
   argTypes: {
     ...styledSystemProps,
   },
   args: {
     onBlur: action("onBlur"),
     onChange: action("onChange"),
+    variant: "typical",
   },
   decorators: (StoryToRender) => (
     <Box minHeight="460px" p={4}>
@@ -33,244 +37,291 @@ const meta: Meta<typeof DateInput> = {
 
 export default meta;
 type Story = StoryObj<typeof DateInput>;
+const storyDateValue = format(subDays(startOfDay(new Date()), 1), "dd/MM/yyyy");
+
+const PairedDateInputs = ({
+  initialValue = storyDateValue,
+  labelDetail,
+  ...props
+}: Partial<DateInputProps> & {
+  initialValue?: string;
+  labelDetail?: string;
+}) => {
+  const [typicalValue, setTypicalValue] = useState(initialValue);
+  const [legacyValue, setLegacyValue] = useState(initialValue);
+  const sizeLabel = props.size ? ` - ${props.size}` : "";
+  const detailLabel = labelDetail ? ` - ${labelDetail}` : "";
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <DateInput
+        {...props}
+        label={`Typical date${sizeLabel}${detailLabel}`}
+        name="date-input-typical"
+        value={typicalValue}
+        onChange={(event) => setTypicalValue(event.target.value.formattedValue)}
+      />
+      <DateInput
+        {...props}
+        variant="legacy"
+        label={`Legacy date${sizeLabel}${detailLabel}`}
+        name="date-input-legacy"
+        value={legacyValue}
+        onChange={(event) => setLegacyValue(event.target.value.formattedValue)}
+      />
+    </Box>
+  );
+};
 
 export const Default: Story = () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
+  const [typicalValue, setTypicalValue] = useState(storyDateValue);
+  const [legacyValue, setLegacyValue] = useState(storyDateValue);
+
   return (
-    <DateInput
-      label="Date"
-      name="date-input"
-      value={state}
-      onChange={setValue}
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <DateInput
+        label="Typical date"
+        name="date-input-typical"
+        value={typicalValue}
+        onChange={(event) => setTypicalValue(event.target.value.formattedValue)}
+      />
+      <DateInput
+        variant="legacy"
+        label="Legacy date"
+        name="date-input-legacy"
+        value={legacyValue}
+        onChange={(event) => setLegacyValue(event.target.value.formattedValue)}
+      />
+    </Box>
   );
 };
 Default.storyName = "Default";
 Default.parameters = { chromatic: { disableSnapshot: true } };
 
 export const InputHint: Story = () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput
-      label="Date"
-      inputHint="Hint text"
-      name="date-input"
-      value={state}
-      onChange={setValue}
-    />
-  );
+  return <PairedDateInputs inputHint="Hint text" />;
 };
 InputHint.storyName = "Input Hint";
 
 export const Sizes: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
   return (
-    <>
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-s)"
+    >
       {(["small", "medium", "large"] as const).map((size) => (
-        <DateInput
-          key={`Date - ${size}`}
-          label={`Date - ${size}`}
-          value={state}
-          onChange={setValue}
-          size={size}
-          mb={2}
-        />
+        <PairedDateInputs key={size} size={size} />
       ))}
-    </>
+    </Box>
   );
 };
 Sizes.storyName = "Sizes";
 
 export const Disabled: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return <DateInput label="Date" value={state} onChange={setValue} disabled />;
+  return <PairedDateInputs disabled />;
 };
 Disabled.storyName = "Disabled";
 
 export const ReadOnly: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return <DateInput label="Date" value={state} onChange={setValue} readOnly />;
+  return <PairedDateInputs readOnly />;
 };
 ReadOnly.storyName = "Read Only";
 
 export const Empty: Story = () => {
-  const [state, setState] = useState("");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
+  const [typicalValue, setTypicalValue] = useState("");
+  const [legacyValue, setLegacyValue] = useState("");
+
+  const setValues = (value: string) => {
+    setTypicalValue(value);
+    setLegacyValue(value);
   };
+
   return (
     <>
       <Box mb={2}>
-        <Button onClick={() => setState("")}>Set empty date</Button>
-        <Button onClick={() => setState("01/04/2019")} ml={2}>
-          Set 2019-04-01
+        <Button onClick={() => setValues("")}>Set empty dates</Button>
+        <Button onClick={() => setValues(storyDateValue)} ml={2}>
+          Set dates to yesterday
         </Button>
       </Box>
-      <DateInput
-        label="Date"
-        name="dateinput"
-        value={state}
-        onChange={setValue}
-        allowEmptyValue
-      />
+      <Box
+        display="flex"
+        flexDirection="column"
+        gap="var(--global-space-layout-xs)"
+      >
+        <DateInput
+          label="Typical date"
+          name="date-input-typical"
+          value={typicalValue}
+          onChange={(event) =>
+            setTypicalValue(event.target.value.formattedValue)
+          }
+          allowEmptyValue
+        />
+        <DateInput
+          variant="legacy"
+          label="Legacy date"
+          name="date-input-legacy"
+          value={legacyValue}
+          onChange={(event) =>
+            setLegacyValue(event.target.value.formattedValue)
+          }
+          allowEmptyValue
+        />
+      </Box>
     </>
   );
 };
 Empty.storyName = "Empty";
 
-export const DisabledDates: Story = ({ onChange, ...args }: DateInputProps) => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
+export const DisabledDatesInCalendar: Story = () => {
+  const isWeekend = (day: Date) => [0, 6].includes(day.getDay());
+
   return (
-    <DateInput
-      {...args}
-      label="Date"
-      name="date-input"
-      value={state}
-      minDate="2019-04-04"
-      maxDate="2019-05-31"
-      onChange={(ev) => {
-        setValue(ev);
-        onChange?.(ev);
-      }}
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <Typography variant="p">
+        Saturdays and Sundays are disabled in both calendars.
+      </Typography>
+      <PairedDateInputs
+        labelDetail="weekends disabled"
+        pickerProps={{
+          disabled: [isWeekend],
+        }}
+      />
+    </Box>
   );
 };
-DisabledDates.storyName = "Disabled Dates";
-DisabledDates.parameters = { chromatic: { disableSnapshot: true } };
-
-export const DisabledDatesUsingPickerProps: Story = () => {
-  const [state, setState] = useState("04/04/2019");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-
-  const isWeekend = (day: Date) => [0, 6].includes(day.getDay());
+DisabledDatesInCalendar.storyName = "Disabled Dates in Calendar";
+DisabledDatesInCalendar.parameters = {
+  chromatic: { disableSnapshot: false },
+};
 
+export const DisabledDatesOutsideMinMaxRange: Story = () => {
   return (
-    <DateInput
-      label="Date"
-      name="date-input"
-      value={state}
-      onChange={setValue}
-      pickerProps={{
-        disabled: [
-          isWeekend,
-          {
-            from: new Date(2019, 3, 1),
-            to: new Date(2019, 3, 15),
-          },
-          { before: new Date(2019, 2, 15) },
-          { after: new Date(2019, 4, 15) },
-        ],
-      }}
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-xs)"
+    >
+      <Typography variant="p">
+        Days outside the minDate/maxDate range are disabled in the calendar
+        below: only dates from 10th to 20th June 2024 are selectable. The year
+        and month selectors themselves remain enabled so users can still
+        navigate to, and view, months outside the selectable range.
+      </Typography>
+      <PairedDateInputs
+        initialValue="15/06/2024"
+        labelDetail="only 10th-20th June 2024 selectable"
+        minDate="2024-06-10"
+        maxDate="2024-06-20"
+      />
+    </Box>
   );
 };
-DisabledDatesUsingPickerProps.storyName = "Disabled Dates using pickerProps";
-DisabledDatesUsingPickerProps.parameters = {
+DisabledDatesOutsideMinMaxRange.storyName =
+  "Disabled Dates Outside Min/Max Range";
+DisabledDatesOutsideMinMaxRange.parameters = {
   chromatic: { disableSnapshot: false },
 };
 
 export const WithLabelInline: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput
-      label="Date"
-      value={state}
-      onChange={setValue}
-      labelInline
-      name="dateinput"
-    />
-  );
+  return <PairedDateInputs labelInline />;
 };
 WithLabelInline.storyName = "With Label Inline";
 
 export const WithCustomWidth: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput
-      label="Date"
-      value={state}
-      onChange={setValue}
-      maxWidth="300px"
-    />
-  );
+  return <PairedDateInputs maxWidth="300px" />;
 };
 WithCustomWidth.storyName = "With Custom Width";
 
-export const WithFieldHelp: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
+export const WithError: Story = () => {
   return (
-    <DateInput
-      label="Date"
-      value={state}
-      onChange={setValue}
-      fieldHelp="Help"
-      name="dateinput"
-    />
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-s)"
+    >
+      <PairedDateInputs
+        labelDetail="error above"
+        inputHint="Date must be in DD/MM/YYYY format"
+        error="Enter a valid date"
+      />
+      <PairedDateInputs
+        labelDetail="error below"
+        validationMessagePositionTop={false}
+        inputHint="Date must be in DD/MM/YYYY format"
+        error="Enter a valid date"
+      />
+    </Box>
   );
 };
-WithFieldHelp.storyName = "With Field Help";
+WithError.storyName = "With Error";
 
-export const WithDisabledPortal: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return (
-    <DateInput label="Date" value={state} onChange={setValue} disablePortal />
-  );
-};
-WithDisabledPortal.storyName = "With Disabled Portal";
-WithDisabledPortal.parameters = { chromatic: { disableSnapshot: true } };
+export const WithCaution: Story = () => (
+  <Box display="flex" flexDirection="column" gap="var(--global-space-layout-s)">
+    <PairedDateInputs
+      labelDetail="caution above"
+      inputHint="Check that the date is correct"
+      warning="Caution message (fix is optional)"
+    />
+    <PairedDateInputs
+      labelDetail="caution below"
+      validationMessagePositionTop={false}
+      inputHint="Check that the date is correct"
+      warning="Caution message (fix is optional)"
+    />
+  </Box>
+);
+WithCaution.storyName = "With Caution";
+
+export const WithoutPortal: Story = () => (
+  <Box
+    display="flex"
+    flexDirection="column"
+    gap="var(--global-space-layout-xs)"
+  >
+    <Typography variant="p">
+      Deprecated compatibility behavior: disablePortal renders the calendar in
+      the Date Input&apos;s local DOM tree instead of through a portal. Existing
+      legacy and typical consumers remain supported, but new implementations
+      should not adopt this prop.
+    </Typography>
+    <PairedDateInputs disablePortal />
+  </Box>
+);
+WithoutPortal.storyName = "Without Portal (Deprecated)";
+WithoutPortal.parameters = { chromatic: { disableSnapshot: true } };
 
 export const Required: Story = () => {
-  const [state, setState] = useState("01/10/2016");
-  const setValue = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  return <DateInput label="Date" value={state} onChange={setValue} required />;
+  return <PairedDateInputs required />;
 };
 Required.storyName = "Required";
 
 export const LocaleOverrideExampleImplementation: Story = () => {
-  const [state, setState] = useState("2022-04-05");
-  const handleChange = (ev: DateChangeEvent) => {
-    setState(ev.target.value.formattedValue);
-  };
-  const [state2, setState2] = useState("2022-04-05");
-  const handleChange2 = (ev: DateChangeEvent) => {
-    setState2(ev.target.value.formattedValue);
-  };
   return (
-    <Box display="flex" justifyContent="space-around">
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-m)"
+    >
+      <Typography variant="p">
+        Locale values are merged with en-GB. Applications should supply approved
+        translations for their users through I18nProvider; omitted accessibility
+        labels fall back to en-GB.
+      </Typography>
       <I18nProvider
         locale={{
           locale: () => "de-DE",
@@ -283,11 +334,7 @@ export const LocaleOverrideExampleImplementation: Story = () => {
           },
         }}
       >
-        <DateInput
-          label="Date `DE` locale"
-          value={state}
-          onChange={handleChange}
-        />
+        <PairedDateInputs initialValue="2022-04-05" labelDetail="DE locale" />
       </I18nProvider>
       <I18nProvider
         locale={{
@@ -301,10 +348,43 @@ export const LocaleOverrideExampleImplementation: Story = () => {
           },
         }}
       >
-        <DateInput
-          label="Date `zh-CN` locale"
-          value={state2}
-          onChange={handleChange2}
+        <PairedDateInputs
+          initialValue="2022-04-05"
+          labelDetail="zh-CN locale"
+        />
+      </I18nProvider>
+      <I18nProvider
+        locale={{
+          locale: () => "pl-PL",
+          date: {
+            dateFnsLocale: () => pl,
+            ariaLabels: {
+              previousMonthButton: () => "Poprzedni miesiąc",
+              nextMonthButton: () => "Następny miesiąc",
+            },
+          },
+        }}
+      >
+        <PairedDateInputs
+          initialValue="2022-04-05"
+          labelDetail="pl-PL locale"
+        />
+      </I18nProvider>
+      <I18nProvider
+        locale={{
+          locale: () => "en-GB",
+          date: {
+            dateFnsLocale: () => enGB,
+            ariaLabels: {
+              previousMonthButton: () => "Previous month",
+              nextMonthButton: () => "Next month",
+            },
+          },
+        }}
+      >
+        <PairedDateInputs
+          initialValue="2022-04-05"
+          labelDetail="en-GB locale"
         />
       </I18nProvider>
     </Box>
@@ -330,7 +410,16 @@ export const LocaleFormatOverrideExampleImplementation: Story = ({
   };
 
   return (
-    <Box display="flex" justifyContent="space-around">
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="var(--global-space-layout-s)"
+    >
+      <Typography variant="p">
+        Both fields use the German locale. The first uses the locale translation
+        key, so it displays YYYY-MM-DD. The second passes dateFormatOverride
+        directly, so that prop takes precedence and displays DD/MM/YYYY.
+      </Typography>
       <I18nProvider
         locale={{
           locale: () => "de-DE",
@@ -346,7 +435,8 @@ export const LocaleFormatOverrideExampleImplementation: Story = ({
       >
         <DateInput
           {...args}
-          label="With dateFormatOverride translation key"
+          variant="typical"
+          label="Translation key format (YYYY-MM-DD)"
           value={stateKey}
           onChange={(ev) => {
             handleChangeKey(ev);
@@ -357,7 +447,8 @@ export const LocaleFormatOverrideExampleImplementation: Story = ({
 
         <DateInput
           {...args}
-          label="With dateFormatOverride prop"
+          variant="typical"
+          label="Prop override format (DD/MM/YYYY)"
           value={stateProp}
           onChange={(ev) => {
             handleChangeProp(ev);
diff --git a/src/components/date/date.style.ts b/src/components/date/date.style.ts
index b786793068..1dcdfeea2a 100644
--- a/src/components/date/date.style.ts
+++ b/src/components/date/date.style.ts
@@ -12,21 +12,29 @@ interface StyledDateInputProps
   size: Required<DateInputProps>["size"];
 }
 
-export const datePickerWidth = {
-  large: "140px",
-  medium: "135px",
-  small: "120px",
+export const dateInputWidthBySize = {
+  large: "176px",
+  medium: "144px",
+  small: "128px",
 };
 
 const StyledDateInput = styled.div.attrs(applyBaseTheme)<StyledDateInputProps>`
   margin-bottom: var(--fieldSpacing);
   ${margin}
 
+  ${({ labelInline }) =>
+    labelInline &&
+    css`
+      [data-component="date-input"] {
+        gap: var(--global-space-comp-m);
+      }
+    `}
+
   ${({ applyDateRangeStyling, labelInline, maxWidth, size }) =>
     applyDateRangeStyling &&
     css`
       [data-role="input-wrapper"] {
-        width: ${maxWidth ?? datePickerWidth[size]};
+        width: ${maxWidth ?? dateInputWidthBySize[size]};
         flex: 0 0 auto;
       }
 
diff --git a/src/components/date/date.test.tsx b/src/components/date/date.test.tsx
index e4e462295f..e10bc82135 100644
--- a/src/components/date/date.test.tsx
+++ b/src/components/date/date.test.tsx
@@ -1,5 +1,12 @@
 import React, { useState } from "react";
-import { render, screen, within, act, waitFor } from "@testing-library/react";
+import {
+  render,
+  screen,
+  within,
+  act,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { enGB as enGBLocale } from "date-fns/locale/en-GB";
@@ -16,13 +23,78 @@ import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-
 import DateInput, { DateChangeEvent } from "./date.component";
 import I18nProvider from "../i18n-provider";
 
+const LegacyDateInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<typeof DateInput>
+>((props, ref) => <DateInput variant="legacy" ref={ref} {...props} />);
+
 const ariaLabels = {
   nextMonthButton: () => "foo",
   previousMonthButton: () => "foo",
+  chooseMonth: () => "Choose the month",
+  chooseYear: () => "Choose the year",
+  closeButton: () => "Close",
 };
 
+test("renders the typical variant by default", () => {
+  render(<DateInput onChange={() => {}} value="" />);
+
+  expect(screen.getByRole("button", { name: "Open calendar" })).toBeVisible();
+  expect(screen.getByTestId("input-icon-toggle")).toBeVisible();
+});
+
+test("renders the legacy variant with a mouse-only calendar icon", () => {
+  render(<DateInput variant="legacy" onChange={() => {}} value="" />);
+
+  expect(screen.getByTestId("input-icon-toggle")).toBeVisible();
+  expect(
+    screen.queryByRole("button", { name: "Open calendar" }),
+  ).not.toBeInTheDocument();
+  expect(screen.getByTestId("input-icon-toggle")).toHaveAttribute(
+    "aria-hidden",
+    "true",
+  );
+});
+
+test.each([
+  ["disabled", { disabled: true }],
+  ["read-only", { readOnly: true }],
+])("does not open the legacy picker when %s", async (_, stateProps) => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onClick = jest.fn();
+
+  render(
+    <LegacyDateInput
+      {...stateProps}
+      onChange={() => {}}
+      onClick={onClick}
+      value=""
+    />,
+  );
+
+  await user.click(screen.getByTestId("input-icon-toggle"));
+
+  expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  expect(onClick).not.toHaveBeenCalled();
+});
+
+test("associates the legacy label with the date input", () => {
+  render(
+    <LegacyDateInput
+      label="Legacy date"
+      name="legacy-date"
+      onChange={() => {}}
+      value=""
+    />,
+  );
+
+  expect(screen.getByLabelText("Legacy date")).toBe(
+    screen.getByRole("textbox", { name: "Legacy date" }),
+  );
+});
+
 testStyledSystemMargin(
-  (props) => <DateInput onChange={() => {}} value="" {...props} />,
+  (props) => <LegacyDateInput onChange={() => {}} value="" {...props} />,
   () => screen.getAllByRole("presentation")[0],
 );
 
@@ -55,7 +127,7 @@ const MockComponent = ({
 }) => {
   const [value, setValue] = useState(initialValue);
   return (
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={(ev: DateChangeEvent) => {
         setValue(ev.target.value.formattedValue);
@@ -84,14 +156,18 @@ afterAll(() => {
 
 test("should accept ref as an object and pass it to the input", () => {
   const ref = { current: null };
-  render(<DateInput label="label" ref={ref} onChange={() => {}} value="" />);
+  render(
+    <LegacyDateInput label="label" ref={ref} onChange={() => {}} value="" />,
+  );
 
   expect(ref.current).toBe(screen.getByRole("textbox"));
 });
 
 test("should accept ref as a callback and pass it to the input", () => {
   const ref = jest.fn();
-  render(<DateInput label="label" ref={ref} onChange={() => {}} value="" />);
+  render(
+    <LegacyDateInput label="label" ref={ref} onChange={() => {}} value="" />,
+  );
 
   expect(ref).toHaveBeenCalledWith(screen.getByRole("textbox"));
 });
@@ -99,7 +175,7 @@ test("should accept ref as a callback and pass it to the input", () => {
 test("should set ref to empty after unmount", () => {
   const ref = { current: null };
   const { unmount } = render(
-    <DateInput label="label" ref={ref} onChange={() => {}} value="" />,
+    <LegacyDateInput label="label" ref={ref} onChange={() => {}} value="" />,
   );
   unmount();
 
@@ -108,7 +184,7 @@ test("should set ref to empty after unmount", () => {
 
 test("should render with provided data- attributes", () => {
   render(
-    <DateInput
+    <LegacyDateInput
       data-element="bar"
       data-role="baz"
       onChange={() => {}}
@@ -120,14 +196,21 @@ test("should render with provided data- attributes", () => {
 });
 
 test("should render with the input focused and picker visible when `autoFocus` is true", () => {
-  render(<DateInput label="label" autoFocus onChange={() => {}} value="" />);
+  render(
+    <LegacyDateInput label="label" autoFocus onChange={() => {}} value="" />,
+  );
 
   expect(screen.getByRole("textbox")).toHaveFocus();
 });
 
 test("should not render with the input focused or the picker visible when `autoFocus` is false", () => {
   render(
-    <DateInput label="label" autoFocus={false} onChange={() => {}} value="" />,
+    <LegacyDateInput
+      label="label"
+      autoFocus={false}
+      onChange={() => {}}
+      value=""
+    />,
   );
 
   expect(screen.getByRole("textbox")).not.toHaveFocus();
@@ -137,7 +220,12 @@ test("should not render with the input focused or the picker visible when `autoF
 test("should open the picker and call the `onFocus` callback if one passed when the input is focused by the user", () => {
   const onFocus = jest.fn();
   render(
-    <DateInput label="label" onChange={() => {}} value="" onFocus={onFocus} />,
+    <LegacyDateInput
+      label="label"
+      onChange={() => {}}
+      value=""
+      onFocus={onFocus}
+    />,
   );
   const input = screen.getByRole("textbox");
   act(() => {
@@ -152,7 +240,7 @@ test("should open the picker and call the `onClick` and `onFocus` callbacks if p
   const onFocus = jest.fn();
   const onClick = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value=""
@@ -177,9 +265,14 @@ test("should open the picker and call the `onClick` callback if passed when the
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onClick = jest.fn();
   render(
-    <DateInput label="label" onChange={() => {}} value="" onClick={onClick} />,
+    <LegacyDateInput
+      label="label"
+      onChange={() => {}}
+      value=""
+      onClick={onClick}
+    />,
   );
-  const icon = screen.getByTestId("icon");
+  const icon = screen.getByTestId("input-icon-toggle");
   await user.click(icon);
 
   expect(screen.getByRole("grid")).toBeVisible();
@@ -188,7 +281,7 @@ test("should open the picker and call the `onClick` callback if passed when the
 
 test("picker closes when input icon is double clicked", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput label="label" onChange={() => {}} value="" />);
+  render(<LegacyDateInput label="label" onChange={() => {}} value="" />);
 
   const icon = screen.getByTestId("input-icon-toggle");
   await user.dblClick(icon);
@@ -200,7 +293,7 @@ test("picker closes when input icon is double clicked", async () => {
 
 test("picker does not close when input icon is double clicked", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput label="label" onChange={() => {}} value="" />);
+  render(<LegacyDateInput label="label" onChange={() => {}} value="" />);
 
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
@@ -216,7 +309,7 @@ test("should not trigger a focus event when the user clicks on the input and `di
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onFocus = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value=""
@@ -235,7 +328,7 @@ test("should not trigger a focus event when the user clicks on the input and `re
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onFocus = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value=""
@@ -255,7 +348,7 @@ test("should call `onBlur` and `onChange` callbacks when the user clicks away fr
   const onBlur = jest.fn();
   const onChange = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={onChange}
       onBlur={onBlur}
@@ -275,7 +368,12 @@ test("should call `onBlur` but not `onChange` callbacks when the user clicks awa
   const onBlur = jest.fn();
   const onChange = jest.fn();
   render(
-    <DateInput label="label" onChange={onChange} onBlur={onBlur} value="foo" />,
+    <LegacyDateInput
+      label="label"
+      onChange={onChange}
+      onBlur={onBlur}
+      value="foo"
+    />,
   );
   const input = screen.getByRole("textbox");
   await user.click(input);
@@ -290,7 +388,7 @@ test("should call `onBlur` but not `onChange` callbacks when the user clicks awa
   const onBlur = jest.fn();
   const onChange = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={onChange}
       onBlur={onBlur}
@@ -310,7 +408,7 @@ test("should not call `onBlur` or `onChange` callbacks when user clicks away fro
   const onBlur = jest.fn();
   const onChange = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={onChange}
       onBlur={onBlur}
@@ -326,18 +424,23 @@ test("should not call `onBlur` or `onChange` callbacks when user clicks away fro
   expect(onChange).not.toHaveBeenCalled();
 });
 
-test("should not call `onBlur` when the user clicks on the input and then the input icon", async () => {
+test("should call `onBlur` when opening the picker moves focus from the input to the calendar", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onBlur = jest.fn();
   render(
-    <DateInput label="label" onChange={() => {}} onBlur={onBlur} value="" />,
+    <LegacyDateInput
+      label="label"
+      onChange={() => {}}
+      onBlur={onBlur}
+      value=""
+    />,
   );
   const input = screen.getByRole("textbox");
   const icon = screen.getByTestId("input-icon-toggle");
   await user.click(input);
   await user.click(icon);
 
-  expect(onBlur).not.toHaveBeenCalled();
+  expect(onBlur).toHaveBeenCalledTimes(1);
 });
 
 test("should call `onChange` callback with expected values when user clicks away from the input and the value has a year with two digits between '69' and '99'", async () => {
@@ -410,11 +513,13 @@ test("should call `onChange` callback when user clears the input and clicks away
   expect(screen.getByRole("textbox")).toHaveValue("");
 });
 
-test("should not close the picker or call the `onChange` and `onBlur` callbacks when the user clicks inside of the picker but not on a day element", async () => {
+test("should not close the picker or call `onChange` when the user clicks inside of the picker but not on a day element", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onChange = jest.fn();
   const onBlur = jest.fn();
-  render(<DateInput onChange={onChange} onBlur={onBlur} value="04/04/2019" />);
+  render(
+    <LegacyDateInput onChange={onChange} onBlur={onBlur} value="04/04/2019" />,
+  );
 
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
@@ -424,14 +529,14 @@ test("should not close the picker or call the `onChange` and `onBlur` callbacks
 
   expect(picker).toBeVisible();
   expect(onChange).not.toHaveBeenCalled();
-  expect(onBlur).not.toHaveBeenCalled();
+  expect(onBlur).toHaveBeenCalledTimes(1);
 });
 
 test("should not close the picker or call the `onChange` and `onBlur` callbacks when the user clicks on a disabled day", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onChange = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       onChange={onChange}
       value="04/04/2019"
       minDate="2019-04-04"
@@ -441,7 +546,9 @@ test("should not close the picker or call the `onChange` and `onBlur` callbacks
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
 
-  await user.click(screen.getByLabelText("Wednesday, April 3rd, 2019"));
+  await user.click(
+    screen.getByRole("button", { name: "Wednesday, April 3rd, 2019" }),
+  );
 
   expect(screen.queryByRole("grid")).toBeVisible();
   expect(onChange).not.toHaveBeenCalled();
@@ -449,12 +556,14 @@ test("should not close the picker or call the `onChange` and `onBlur` callbacks
 
 test("should close the open picker when the user presses the 'Escape' key and focus is within the picker", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="" />);
+  render(<LegacyDateInput onChange={() => {}} value="" />);
 
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
 
-  await user.tab();
+  act(() => {
+    within(screen.getByRole("grid")).getAllByRole("button")[0].focus();
+  });
   await user.keyboard("{Escape}");
 
   expect(screen.queryByRole("grid")).not.toBeInTheDocument();
@@ -463,7 +572,9 @@ test("should close the open picker when the user presses the 'Escape' key and fo
 test("should call `onKeyDown` callback when the user types and the input is focused", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onKeyDown = jest.fn();
-  render(<DateInput onChange={() => {}} value="" onKeyDown={onKeyDown} />);
+  render(
+    <LegacyDateInput onChange={() => {}} value="" onKeyDown={onKeyDown} />,
+  );
   const input = screen.getByRole("textbox");
   await user.click(input);
   await user.type(input, "12");
@@ -471,107 +582,85 @@ test("should call `onKeyDown` callback when the user types and the input is focu
   expect(onKeyDown).toHaveBeenCalledTimes(2);
 });
 
-test("should keep the picker open and move focus to the previous month button when the user presses tab and the input is focused", async () => {
-  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="" />);
-
-  const calendarIcon = screen.getByTestId("input-icon-toggle");
-  await user.click(calendarIcon);
-
-  await user.tab();
-
-  expect(screen.getByRole("grid")).toBeVisible();
-  expect(screen.getByRole("button", { name: "Previous month" })).toHaveFocus();
-});
-
-test("should keep the picker open and move focus to the previous month button when the user presses tab and the input is focused and `disablePortal` is set", async () => {
-  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="" disablePortal />);
-
-  const calendarIcon = screen.getByTestId("input-icon-toggle");
-  await user.click(calendarIcon);
-
-  await user.tab();
-
-  expect(screen.getByRole("grid")).toBeVisible();
-  expect(screen.getByRole("button", { name: "Previous month" })).toHaveFocus();
-});
-
-test("should close the picker when the user presses shift + tab and the input is focused and the picker is open", async () => {
-  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="" />);
-
-  const calendarIcon = screen.getByTestId("input-icon-toggle");
-  await user.click(calendarIcon);
-
-  expect(screen.getByRole("grid")).toBeVisible();
-
-  await user.tab();
-  expect(screen.getByRole("button", { name: "Previous month" })).toHaveFocus();
+test.each([true, false])(
+  "should keep the picker open and focus the close button with `disablePortal` set to %s",
+  async (disablePortal) => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+    render(
+      <LegacyDateInput
+        onChange={() => {}}
+        value=""
+        disablePortal={disablePortal}
+      />,
+    );
 
-  await user.tab({ shift: true });
+    const calendarIcon = screen.getByTestId("input-icon-toggle");
+    await user.click(calendarIcon);
+    await user.tab();
 
-  expect(screen.queryByRole("grid")).not.toBeInTheDocument();
-});
+    expect(screen.getByRole("grid")).toBeVisible();
+    expect(screen.getByRole("button", { name: "Close" })).toHaveFocus();
+  },
+);
 
-test("should close the picker when the user presses shift + tab and the previous month button is focused", async () => {
+test("should render month and year navigation selects", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="" />);
-
-  const calendarIcon = screen.getByTestId("input-icon-toggle");
-  await user.click(calendarIcon);
+  render(<LegacyDateInput onChange={() => {}} value="" />);
+  await user.click(screen.getByTestId("input-icon-toggle"));
 
-  await user.tab();
-
-  expect(screen.getByRole("button", { name: "Previous month" })).toHaveFocus();
-  await user.tab({ shift: true });
-  expect(screen.queryByRole("grid")).not.toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: "Choose the month" }),
+  ).toBeVisible();
+  expect(
+    screen.getByRole("combobox", { name: "Choose the year" }),
+  ).toBeVisible();
 });
 
-test("should not close the picker when the user presses shift + tab and neither the input or previous month button are focused", async () => {
+test("should narrow the year navigation select options via yearRangeOffset", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="" />);
-
-  const calendarIcon = screen.getByTestId("input-icon-toggle");
-  await user.click(calendarIcon);
+  render(
+    <LegacyDateInput
+      onChange={() => {}}
+      value="15/06/2025"
+      yearRangeOffset={1}
+    />,
+  );
+  await user.click(screen.getByTestId("input-icon-toggle"));
 
-  await user.tab();
-  await user.tab();
+  const yearSelect = screen.getByRole("combobox", {
+    name: "Choose the year",
+  }) as HTMLSelectElement;
+  const optionValues = Array.from(yearSelect.options).map(
+    (option) => option.value,
+  );
 
-  expect(screen.getByRole("button", { name: "Next month" })).toHaveFocus();
-  await user.tab({ shift: true });
-  expect(screen.getByRole("grid")).toBeVisible();
+  expect(optionValues).toEqual(["2024", "2025", "2026"]);
 });
 
-test("should focus the next button and then the selected day element when the user presses tab and close the picker with a subsequent tab press", async () => {
+test("should update a legacy input only after selecting a date, not when navigating by month or year", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  render(<DateInput onChange={() => {}} value="04/04/2019" />);
+  const onChange = jest.fn();
+  render(<MockComponent initialValue="15/01/2025" onChange={onChange} />);
 
-  const calendarIcon = screen.getByTestId("input-icon-toggle");
-  await user.click(calendarIcon);
+  const input = screen.getByRole("textbox");
+  await user.click(screen.getByTestId("input-icon-toggle"));
 
-  const previousMonthButton = await screen.findByRole("button", {
-    name: "Previous month",
+  fireEvent.change(screen.getByRole("combobox", { name: "Choose the month" }), {
+    target: { value: "1" },
+  });
+  fireEvent.change(screen.getByRole("combobox", { name: "Choose the year" }), {
+    target: { value: "2026" },
   });
-  await user.tab();
-
-  expect(previousMonthButton).toHaveFocus();
-
-  await user.tab();
-
-  expect(screen.getByRole("button", { name: "Next month" })).toHaveFocus();
-
-  await user.tab();
 
-  expect(
-    screen.getByLabelText("Thursday, April 4th, 2019", { exact: false }),
-  ).toHaveFocus();
+  expect(input).toHaveValue("15/01/2025");
+  expect(onChange).not.toHaveBeenCalled();
 
-  await user.tab();
+  await user.click(
+    screen.getByRole("button", { name: "Sunday, February 15th, 2026" }),
+  );
 
-  await waitFor(() => {
-    expect(screen.queryByRole("grid")).not.toBeInTheDocument();
-  });
+  expect(input).toHaveValue("15/02/2026");
+  expect(onChange).toHaveBeenCalledTimes(1);
 });
 
 test("should close the picker, update the value and refocus the input element when the user clicks a day element", async () => {
@@ -581,7 +670,9 @@ test("should close the picker, update the value and refocus the input element wh
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
 
-  await user.click(screen.getByLabelText("Thursday, April 11th, 2019"));
+  await user.click(
+    screen.getByRole("button", { name: "Thursday, April 11th, 2019" }),
+  );
 
   expect(screen.queryByRole("grid")).not.toBeInTheDocument();
   await waitFor(() => {
@@ -591,7 +682,9 @@ test("should close the picker, update the value and refocus the input element wh
 });
 
 test("should render the input with the expected required attribute when the `required` prop is true", () => {
-  render(<DateInput label="label" onChange={() => {}} value="" required />);
+  render(
+    <LegacyDateInput label="label" onChange={() => {}} value="" required />,
+  );
   const input = screen.getByRole("textbox");
 
   expect(input).toBeRequired();
@@ -600,7 +693,12 @@ test("should render the input with the expected required attribute when the `req
 test("should render the picker as a descendant of the main presentation element when `disablePortal` is true", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <DateInput label="label" onChange={() => {}} value="" disablePortal />,
+    <LegacyDateInput
+      label="label"
+      onChange={() => {}}
+      value=""
+      disablePortal
+    />,
   );
 
   const calendarIcon = screen.getByTestId("input-icon-toggle");
@@ -614,7 +712,7 @@ test("should render the picker as a descendant of the main presentation element
 test("should not render the picker as a descendant of the main presentation element when `disablePortal` is false", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value=""
@@ -635,7 +733,7 @@ describe("when the `locale` is undefined", () => {
   test("should render with the input value matching 'en-GB' expected format when initial `value` is ISO format`", () => {
     render(
       <I18nProvider>
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -684,7 +782,7 @@ describe("when the `locale` is 'en-GB''", () => {
           date: { ariaLabels, dateFnsLocale: () => enGBLocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -745,7 +843,7 @@ describe("when the `locale` is 'en-GB''", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -793,7 +891,7 @@ describe("when the `locale` is 'de-DE'", () => {
           date: { ariaLabels, dateFnsLocale: () => deLocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -854,7 +952,7 @@ describe("when the `locale` is 'de-DE'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -902,7 +1000,7 @@ describe("when the `locale` is 'es'", () => {
           date: { ariaLabels, dateFnsLocale: () => esLocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -963,7 +1061,7 @@ describe("when the `locale` is 'es'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1011,7 +1109,7 @@ describe("when the `locale` is 'en-ZA'", () => {
           date: { ariaLabels, dateFnsLocale: () => enZALocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1072,7 +1170,7 @@ describe("when the `locale` is 'en-ZA'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1120,7 +1218,7 @@ describe("when the `locale` is 'fr-FR'", () => {
           date: { ariaLabels, dateFnsLocale: () => frLocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1181,7 +1279,7 @@ describe("when the `locale` is 'fr-FR'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1229,7 +1327,7 @@ describe("when the `locale` is 'fr-CA'", () => {
           date: { ariaLabels, dateFnsLocale: () => frCALocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1290,7 +1388,7 @@ describe("when the `locale` is 'fr-CA'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1338,7 +1436,7 @@ describe("when the `locale` is 'en-CA'", () => {
           date: { ariaLabels, dateFnsLocale: () => enCALocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1399,7 +1497,7 @@ describe("when the `locale` is 'en-CA'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1447,7 +1545,7 @@ describe("when the `locale` is 'en-US'", () => {
           date: { ariaLabels, dateFnsLocale: () => enUSLocale },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1508,7 +1606,7 @@ describe("when the `locale` is 'en-US'", () => {
           },
         }}
       >
-        <DateInput onChange={() => {}} value="2019-04-05" />
+        <LegacyDateInput onChange={() => {}} value="2019-04-05" />
       </I18nProvider>,
     );
 
@@ -1597,7 +1695,7 @@ test("should call `onChange` with expected parameters but not update the input v
 
 test("should render the validation message when an `error` is passed a string value and the user hovers the mouse over the input", () => {
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value=""
@@ -1611,7 +1709,7 @@ test("should render the validation message when an `error` is passed a string va
 });
 
 test("should not render the validation message when `error` is passed a boolean value", () => {
-  render(<DateInput label="label" onChange={() => {}} value="" error />);
+  render(<LegacyDateInput label="label" onChange={() => {}} value="" error />);
   const input = screen.getByRole("textbox");
 
   expect(input).toHaveAttribute("aria-invalid", "true");
@@ -1620,7 +1718,7 @@ test("should not render the validation message when `error` is passed a boolean
 
 test("should render the validation message when an `warning` is passed a string value and the user hovers the mouse over the input", () => {
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value=""
@@ -1634,7 +1732,9 @@ test("should render the validation message when an `warning` is passed a string
 });
 
 test("should not render the validation message when `warning` is passed a boolean value", () => {
-  render(<DateInput label="label" onChange={() => {}} value="" warning />);
+  render(
+    <LegacyDateInput label="label" onChange={() => {}} value="" warning />,
+  );
   const input = screen.getByRole("textbox");
 
   expect(input).toHaveAttribute("aria-invalid", "false");
@@ -1646,7 +1746,7 @@ test("should call `onPickerOpen` callback when the user opens the DatePicker and
   const onPickerOpen = jest.fn();
   const onPickerClose = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       onPickerOpen={onPickerOpen}
@@ -1663,6 +1763,29 @@ test("should call `onPickerOpen` callback when the user opens the DatePicker and
   expect(onPickerClose).toHaveBeenCalled();
 });
 
+test("should close the legacy DatePicker with its close button and return focus to the input", async () => {
+  const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+  const onPickerClose = jest.fn();
+  render(
+    <LegacyDateInput
+      label="label"
+      onChange={() => {}}
+      onPickerClose={onPickerClose}
+      value="010122"
+    />,
+  );
+
+  const input = screen.getByRole("textbox", { name: "label" });
+  await user.click(screen.getByTestId("input-icon-toggle"));
+  await user.click(screen.getByRole("button", { name: "Close" }));
+
+  expect(
+    screen.queryByRole("button", { name: "Close" }),
+  ).not.toBeInTheDocument();
+  expect(input).toHaveFocus();
+  expect(onPickerClose).toHaveBeenCalledTimes(1);
+});
+
 test("should select the correct date when the locale is overridden and a date is typed into the input", async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
   const onChange = jest.fn();
@@ -1678,7 +1801,7 @@ test("should select the correct date when the locale is overridden and a date is
         },
       }}
     >
-      <DateInput onChange={onChange} value="2019-04-05" />
+      <LegacyDateInput onChange={onChange} value="2019-04-05" />
     </I18nProvider>,
   );
   const input = screen.getByRole("textbox");
@@ -1687,8 +1810,12 @@ test("should select the correct date when the locale is overridden and a date is
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
 
-  const caption = screen.getByRole("status");
-  expect(caption).toHaveTextContent("April 2019");
+  expect(
+    screen.getByRole("combobox", { name: "Choose the month" }),
+  ).toHaveValue("3");
+  expect(screen.getByRole("combobox", { name: "Choose the year" })).toHaveValue(
+    "2019",
+  );
 });
 
 // coverage
@@ -1697,7 +1824,7 @@ test("should correctly focus when disablePortal is false and Tab is used to navi
   const onFocus = jest.fn();
   const onClick = jest.fn();
   render(
-    <DateInput
+    <LegacyDateInput
       label="label"
       onChange={() => {}}
       value="2019-04-04"
@@ -1713,9 +1840,12 @@ test("should correctly focus when disablePortal is false and Tab is used to navi
   await user.tab();
   await user.tab();
   await user.tab();
+  await user.tab();
 
   expect(
-    screen.getByLabelText("Thursday, April 4th, 2019", { exact: false }),
+    screen.getByRole("button", {
+      name: "Thursday, April 4th, 2019, selected",
+    }),
   ).toHaveFocus();
 });
 
@@ -1726,7 +1856,7 @@ test("should fire the onPickerClose callback when the input has focus and shift-
   const onPickerClose = jest.fn();
 
   render(
-    <DateInput
+    <LegacyDateInput
       onChange={onChange}
       value="2019-04-05"
       onPickerClose={onPickerClose}
@@ -1741,28 +1871,3 @@ test("should fire the onPickerClose callback when the input has focus and shift-
   await user.tab({ shift: true });
   expect(onPickerClose).toHaveBeenCalled();
 });
-
-test.each([true, false])(
-  `should tab correctly when \`disablePortal\` is %s`,
-  async (disablePortal) => {
-    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-    const onChange = jest.fn();
-
-    render(
-      <DateInput
-        onChange={onChange}
-        value="2019-04-05"
-        disablePortal={disablePortal}
-      />,
-    );
-    const calendarIcon = screen.getByTestId("input-icon-toggle");
-    await user.click(calendarIcon);
-    await user.tab();
-    const calendar = await screen.findByRole("grid");
-
-    expect(calendar).toBeVisible();
-    expect(
-      screen.getByRole("button", { name: "Previous month" }),
-    ).toHaveFocus();
-  },
-);
diff --git a/src/components/flat-table/flat-table.test.tsx b/src/components/flat-table/flat-table.test.tsx
index 9b474a5420..ba7e1ccc50 100644
--- a/src/components/flat-table/flat-table.test.tsx
+++ b/src/components/flat-table/flat-table.test.tsx
@@ -1,6 +1,12 @@
 import React from "react";
 
-import { act, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 
 import userEvent from "@testing-library/user-event";
 import FlatTable from "./flat-table.component";
@@ -1378,20 +1384,14 @@ test("when a DateInput is opened in an expandable row and FlatTable has sticky f
       </FlatTableBody>
     </FlatTable>,
   );
-  const preventDefaultSpy = jest.spyOn(
-    KeyboardEvent.prototype,
-    "preventDefault",
-  );
-
   const flatTableRow = screen.getByTestId("flat-table-row-0");
+  const table = screen.getByRole("table");
 
   await user.click(flatTableRow);
-  await user.keyboard("{PageDown}");
-  await user.keyboard("{PageUp}");
-  await user.keyboard("{Home}");
-  await user.keyboard("{End}");
-
-  expect(preventDefaultSpy).not.toHaveBeenCalled();
+  expect(fireEvent.keyDown(table, { key: "PageDown" })).toBe(true);
+  expect(fireEvent.keyDown(table, { key: "PageUp" })).toBe(true);
+  expect(fireEvent.keyDown(table, { key: "Home" })).toBe(true);
+  expect(fireEvent.keyDown(table, { key: "End" })).toBe(true);
 
   const calendarIcon = screen.getByTestId("input-icon-toggle");
   await user.click(calendarIcon);
@@ -1400,11 +1400,8 @@ test("when a DateInput is opened in an expandable row and FlatTable has sticky f
     expect(screen.getByRole("grid")).toBeVisible();
   });
 
-  await user.keyboard("{PageDown}");
-  await user.keyboard("{PageUp}");
-  await user.keyboard("{Home}");
-  await user.keyboard("{End}");
-
-  expect(preventDefaultSpy).toHaveBeenCalled();
-  preventDefaultSpy.mockRestore();
+  expect(fireEvent.keyDown(table, { key: "PageDown" })).toBe(false);
+  expect(fireEvent.keyDown(table, { key: "PageUp" })).toBe(false);
+  expect(fireEvent.keyDown(table, { key: "Home" })).toBe(false);
+  expect(fireEvent.keyDown(table, { key: "End" })).toBe(false);
 });
diff --git a/src/components/form/form-interaction.stories.tsx b/src/components/form/form-interaction.stories.tsx
index 643544fb1f..bd1d75dc30 100644
--- a/src/components/form/form-interaction.stories.tsx
+++ b/src/components/form/form-interaction.stories.tsx
@@ -123,6 +123,9 @@ export const FocusManagement: Story = {
     const datepickerInput = canvas.getByRole("textbox", {
       name: /date picker/i,
     });
+    const datepickerButton = canvas.getByRole("button", {
+      name: /open calendar/i,
+    });
     const textarea = canvas.getByRole("textbox", { name: /textbox 3/i });
     const checkboxes = canvas.getAllByRole("checkbox", { name: /checkbox/i });
     const tertiaryButton = canvas.getByRole("button", { name: /tertiary/i });
@@ -144,6 +147,9 @@ export const FocusManagement: Story = {
     await userEvent.tab();
     await expect(datepickerInput).toHaveFocus();
 
+    await userEvent.tab();
+    await expect(datepickerButton).toHaveFocus();
+
     await userEvent.tab();
     await expect(textarea).toHaveFocus();
 
diff --git a/src/components/i18n-provider/i18n-provider.test.tsx b/src/components/i18n-provider/i18n-provider.test.tsx
index 912ec02dd7..5045f8ce3c 100644
--- a/src/components/i18n-provider/i18n-provider.test.tsx
+++ b/src/components/i18n-provider/i18n-provider.test.tsx
@@ -17,6 +17,20 @@ const TestComponent = () => {
   );
 };
 
+const DateAriaLabels = () => {
+  const { ariaLabels } = useLocale().date;
+
+  return (
+    <>
+      <span>{ariaLabels.previousMonthButton()}</span>
+      <span>{ariaLabels.openCalendarButton?.()}</span>
+      <span>{ariaLabels.chooseMonth?.()}</span>
+      <span>{ariaLabels.chooseYear?.()}</span>
+      <span>{ariaLabels.closeButton?.()}</span>
+    </>
+  );
+};
+
 it("defaults to the 'en-gb' locale when no other locale is specified", () => {
   render(
     <I18nProvider>
@@ -39,6 +53,20 @@ it("should support overriding the default locale with 'de-DE'", () => {
   expect(localeText).not.toHaveTextContent("en-GB");
 });
 
+it("falls back to en-GB for date aria labels omitted by another locale", () => {
+  render(
+    <I18nProvider locale={deDE}>
+      <DateAriaLabels />
+    </I18nProvider>,
+  );
+
+  expect(screen.getByText("Vorheriger Monat")).toBeVisible();
+  expect(screen.getByText("Open calendar")).toBeVisible();
+  expect(screen.getByText("Choose the month")).toBeVisible();
+  expect(screen.getByText("Choose the year")).toBeVisible();
+  expect(screen.getByText("Close")).toBeVisible();
+});
+
 it("should support overriding the default locale with 'en-CA'", () => {
   render(
     <I18nProvider locale={enCA}>
diff --git a/src/locales/en-gb.ts b/src/locales/en-gb.ts
index b4010c86b0..a1b91f22b9 100644
--- a/src/locales/en-gb.ts
+++ b/src/locales/en-gb.ts
@@ -46,6 +46,12 @@ const enGB: Locale = {
     ariaLabels: {
       previousMonthButton: () => "Previous month",
       nextMonthButton: () => "Next month",
+      openCalendarButton: () => "Open calendar",
+      chooseMonth: () => "Choose the month",
+      chooseYear: () => "Choose the year",
+      closeButton: () => "Close",
+      openCalendarDescription: () => "Instructions on how to use",
+      chooseDate: () => "Choose a date",
     },
     dateFormatOverride: undefined,
   },
diff --git a/src/locales/locale.ts b/src/locales/locale.ts
index 344aef86b8..534d355ab8 100644
--- a/src/locales/locale.ts
+++ b/src/locales/locale.ts
@@ -34,6 +34,18 @@ interface Locale {
     ariaLabels: {
       previousMonthButton: () => string;
       nextMonthButton: () => string;
+      /** Optional in locale overrides; I18nProvider supplies the en-GB fallback. */
+      openCalendarButton?: () => string;
+      /** Optional in locale overrides; I18nProvider supplies the en-GB fallback. */
+      chooseMonth?: () => string;
+      /** Optional in locale overrides; I18nProvider supplies the en-GB fallback. */
+      chooseYear?: () => string;
+      /** Optional in locale overrides; I18nProvider supplies the en-GB fallback. */
+      closeButton?: () => string;
+      /** Optional in locale overrides; I18nProvider supplies the en-GB fallback. */
+      openCalendarDescription?: () => string;
+      /** Optional in locale overrides; I18nProvider supplies the en-GB fallback. */
+      chooseDate?: () => string;
     };
     dateFormatOverride?: string;
   };