diff --git a/src/components/Input/DateInput.js b/src/components/Input/DateInput.js
index 43a3e373..597b0635 100644
--- a/src/components/Input/DateInput.js
+++ b/src/components/Input/DateInput.js
@@ -79,6 +79,7 @@ export default class DateInput extends React.Component {
     showOnFocus: PropTypes.bool,
     state: PropTypes.any,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    container: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   };
 
   static defaultProps = {
@@ -309,6 +310,7 @@ export default class DateInput extends React.Component {
       positionFixed,
       value,
       state,
+      container,
       ...props
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -353,7 +355,12 @@ export default class DateInput extends React.Component {
               </Button>
             </InputGroup>
           </DropdownToggle>
-          <DropdownMenu className="p-0" onKeyDown={this.onKeyDown} {...dropdownProps}>
+          <DropdownMenu
+            className="p-0"
+            onKeyDown={this.onKeyDown}
+            container={container}
+            {...dropdownProps}
+          >
             {renderHeader(this.prevMonth, this.nextMonth, this.prevYear, this.nextYear) || header || (
               <header className="d-flex py-2">
                 <ButtonGroup size="sm">
diff --git a/src/components/Input/DateInput.stories.js b/src/components/Input/DateInput.stories.js
index 0819fe2c..cd8e7ca9 100644
--- a/src/components/Input/DateInput.stories.js
+++ b/src/components/Input/DateInput.stories.js
@@ -30,6 +30,7 @@ WithProps.args = {
   onChange: action('onChange'),
   onClose: action('onClose'),
   positionFixed: false,
+  container: undefined,
 };
 
 export const WithId = (args) => (
@@ -163,3 +164,34 @@ export const CalendarCustomDay = (args) => (
     />
   </div>
 );
+
+export const WithContainer = (args) => (
+  <div>
+    <p>
+      The container prop allows you to specify where the dropdown menu is rendered. Use
+      &apos;body&apos; to avoid z-index issues or provide a custom container element.
+    </p>
+    <div
+      id="constrained-container"
+      style={{
+        position: 'relative',
+        overflow: 'hidden',
+        height: '310px',
+        border: '1px solid #ccc',
+        padding: '10px',
+      }}
+    >
+      <p>This container has overflow: hidden and limited height</p>
+      <DateInput container="body" placeholder="Container = body" {...args} />
+      <br />
+      <br />
+      <DateInput container="#constrained-container" placeholder="Container = this div" {...args} />
+      <br />
+      <br />
+      <DateInput placeholder="Default positioning (may be clipped)" {...args} />
+    </div>
+  </div>
+);
+WithContainer.args = {
+  onChange: action('onChange'),
+};