diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.story.tsx
index 34d45ad1f46..ad104e273e8 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.story.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.story.tsx
@@ -4,28 +4,46 @@ import React, { useState } from 'react';
 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 import { Button } from '../../Button/Button';
 
-import { DatePicker } from './DatePicker';
+import { DatePicker, DatePickerProps } from './DatePicker';
 import mdx from './DatePicker.mdx';
 
 const meta: ComponentMeta<typeof DatePicker> = {
   title: 'Pickers and Editors/TimePickers/Pickers And Editors/DatePicker',
   component: DatePicker,
   decorators: [withCenteredStory],
+  argTypes: {
+    minDate: { control: 'date' },
+  },
   parameters: {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['onChange', 'onClose', 'value', 'isOpen'],
+    },
   },
 };
 
-export const Basic = () => {
+export const Basic = (args: DatePickerProps) => {
   const [date, setDate] = useState<Date>(new Date());
   const [open, setOpen] = useState(false);
 
+  if (args?.minDate !== undefined) {
+    args.minDate = new Date(args.minDate);
+  }
+
+  args = {
+    ...args,
+    isOpen: open,
+    value: date,
+    onChange: (newDate) => setDate(newDate),
+    onClose: () => setOpen(false),
+  };
+
   return (
     <>
       <Button onClick={() => setOpen(true)}>Show Calendar</Button>
-      <DatePicker isOpen={open} value={date} onChange={(newDate) => setDate(newDate)} onClose={() => setOpen(false)} />
+      <DatePicker {...args} />
     </>
   );
 };