diff --git a/src/stories/DateInput/DateInput.stories.tsx b/src/stories/DateInput/DateInput.stories.tsx
index d33c280..951afcd 100644
--- a/src/stories/DateInput/DateInput.stories.tsx
+++ b/src/stories/DateInput/DateInput.stories.tsx
@@ -9,15 +9,10 @@ export default {
 } as Meta;
 
 const DatepickerTemplate: StoryFn = (args) => {
-  function getEighteenYearsAgo(): string {
+  function getEighteenYearsAgo() {
     const date = new Date();
     date.setFullYear(date.getFullYear() - 18);
-
-    const year = date.getFullYear();
-    const month = ("0" + (date.getMonth() + 1)).slice(-2); // Months are 0 based, so +1 and pad with 0
-    const day = ("0" + date.getDate()).slice(-2);
-
-    return `${year}-${month}-${day}`;
+    return date;
   }
   const [value, setValue] = useState("");
   const [isInvalid, setIsInvalid] = useState(false);
@@ -31,7 +26,7 @@ const DatepickerTemplate: StoryFn = (args) => {
         isInvalid={isInvalid}
         id="test1"
         value={value}
-        max={getEighteenYearsAgo()}
+        maxDate={getEighteenYearsAgo()}
         onChange={(e) => setValue(e.target.value)}
         onBlur={(e) => {
           setIsInvalid(!value);
diff --git a/src/stories/DateInput/index.tsx b/src/stories/DateInput/index.tsx
index 158915f..70b362f 100644
--- a/src/stories/DateInput/index.tsx
+++ b/src/stories/DateInput/index.tsx
@@ -10,14 +10,36 @@ const StyledInput = styled(FormInput)`
     padding: 0px;
   }
 `;
+function formatDate(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
 
 export const DateInput = ({
   isInvalid,
+  maxDate,
+  minDate,
+  inputProps,
   ...props
-}: { isInvalid?: boolean } & React.InputHTMLAttributes<HTMLInputElement>) => {
+}: {
+  isInvalid?: boolean;
+  maxDate?: Date;
+  minDate?: Date;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+} & React.InputHTMLAttributes<HTMLInputElement>) => {
   return (
     <StyledInput type="text" isInvalid={isInvalid}>
-      <input id={props.id} name={props.name} type="date" {...props} />
+      <input
+        id={props.id}
+        name={props.name}
+        type="date"
+        max={maxDate ? formatDate(maxDate) : undefined}
+        min={minDate ? formatDate(minDate) : undefined}
+        {...props}
+        {...inputProps}
+      />
     </StyledInput>
   );
 };