diff --git a/stories/Components/DateInput.stories.jsx b/stories/Components/DateInput.stories.jsx
index 4dc41488b..5594e516a 100644
--- a/stories/Components/DateInput.stories.jsx
+++ b/stories/Components/DateInput.stories.jsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import isChromatic from "chromatic/isChromatic";
 import dayjs from "dayjs";
+import { DATE_PICKER_CODE, DATE_RANGE_PICKER_CODE } from "../constants";
 
 import { Modal, Typography, Pane, DatePicker } from "components";
 import Button from "components/Button";
@@ -154,6 +155,10 @@ const DateRangePicker = args => (
 
 DateRangePicker.storyName = "DateRangePicker";
 
+DateRangePicker.parameters = {
+  docs: { source: { code: DATE_PICKER_CODE } },
+};
+
 const DateRangePickerWithPresetRanges = args => (
   <div className="space-y-3">
     <DatePicker
@@ -186,6 +191,10 @@ const DateRangePickerWithPresetRanges = args => (
 DateRangePickerWithPresetRanges.storyName =
   "DateRangePicker with preset ranges";
 
+DateRangePickerWithPresetRanges.parameters = {
+  docs: { source: { code: DATE_RANGE_PICKER_CODE } },
+};
+
 const ShowTime = args => (
   <DatePicker {...args} showTime label="Date" picker="date" type="date" />
 );
diff --git a/stories/constants.jsx b/stories/constants.jsx
index 2ac21fb4b..fe49f7f22 100644
--- a/stories/constants.jsx
+++ b/stories/constants.jsx
@@ -27,9 +27,7 @@ const columnData = [
   },
   {
     dataIndex: "guid",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "guid",
     title: function noRefCheck() {},
     width: 150,
@@ -53,26 +51,17 @@ const columnData = [
     title: "Buzzword",
     width: 250,
   },
-  {
-    dataIndex: "gender",
-    key: "gender",
-    title: "Gender",
-    width: 150,
-  },
+  { dataIndex: "gender", key: "gender", title: "Gender", width: 150 },
   {
     dataIndex: "email",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "email",
     title: "Email",
     width: 200,
   },
   {
     dataIndex: "company_name",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "company_name",
     title: "Company Name",
     width: 75,
@@ -85,18 +74,14 @@ const columnData = [
   },
   {
     dataIndex: "department",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "department",
     title: "Department",
     width: 150,
   },
   {
     dataIndex: "job_title",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "job_title",
     title: "Job Title",
     width: 75,
@@ -109,9 +94,7 @@ const columnData = [
   },
   {
     dataIndex: "credit_card_number",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "credit_card_number",
     title: "Credit Card Number",
     width: 250,
@@ -124,9 +107,7 @@ const columnData = [
   },
   {
     dataIndex: "domain_name",
-    ellipsis: {
-      showTitle: false,
-    },
+    ellipsis: { showTitle: false },
     key: "domain_name",
     title: "Domain Name",
     width: 200,
@@ -1628,3 +1609,28 @@ export const STORYBOOK_NAV_LINKS = [
     icon: UserCircle,
   },
 ];
+
+export const DATE_PICKER_CODE = `
+<DatePicker
+  label="Date range"
+  type="range"
+  defaultValue={[dayjs(), dayjs().add(7, "day")]}
+/>`;
+
+export const DATE_RANGE_PICKER_CODE = `
+<DatePicker
+  label="Date range"
+  type="range"
+  defaultValue={[dayjs(), dayjs().add(7, "day")]}
+  ranges={{
+    Today: [dayjs(), dayjs()],
+    Yesterday: [dayjs().subtract(1, "d"), dayjs()],
+    "Last Week": [dayjs().subtract(7, "d"), dayjs()],
+    "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
+    "Last Month": [
+      dayjs().subtract(1, "month").startOf("month"),
+      dayjs().subtract(1, "month").endOf("month"),
+    ],
+    "This Year": [dayjs().startOf("year"), dayjs().endOf("year")],
+  }}
+/>`;