diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
index 4510c24ddaf..3b31993a4e0 100644
--- a/superset-frontend/src/common/components/common.stories.tsx
+++ b/superset-frontend/src/common/components/common.stories.tsx
@@ -27,10 +27,6 @@ import { Switch as AntdSwitch } from './Switch';
 import { Menu, Input, Divider } from '.';
 import { Dropdown } from './Dropdown';
 import InfoTooltip from './InfoTooltip';
-import {
-  DatePicker as AntdDatePicker,
-  RangePicker as AntdRangePicker,
-} from './DatePicker';
 import { CronPicker, CronError } from './CronPicker';
 
 export default {
@@ -202,15 +198,6 @@ StyledInfoTooltip.argTypes = {
   },
 };
 
-export const DatePicker = () => <AntdDatePicker showTime />;
-export const DateRangePicker = () => (
-  <AntdRangePicker
-    format="YYYY-MM-DD hh:mm a"
-    showTime={{ format: 'hh:mm a' }}
-    use12Hours
-  />
-);
-
 export const Switch = () => (
   <>
     <AntdSwitch defaultChecked />
diff --git a/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx b/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
new file mode 100644
index 00000000000..4827b04d786
--- /dev/null
+++ b/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
@@ -0,0 +1,95 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker';
+import { DatePicker, RangePicker } from '.';
+
+export default {
+  title: 'DatePicker',
+  component: DatePicker,
+};
+
+const commonArgs = {
+  allowClear: true,
+  autoFocus: true,
+  bordered: true,
+  disabled: false,
+  inputReadOnly: false,
+  size: 'middle',
+  format: 'YYYY-MM-DD hh:mm a',
+  showTime: { format: 'hh:mm a' },
+};
+
+const interactiveTypes = {
+  mode: { disabled: true },
+  picker: {
+    control: {
+      type: 'select',
+      options: ['', 'date', 'week', 'month', 'quarter', 'year'],
+    },
+  },
+  size: {
+    control: {
+      type: 'select',
+      options: ['large', 'middle', 'small'],
+    },
+  },
+};
+
+export const InteractiveDatePicker = (args: DatePickerProps) => (
+  <DatePicker {...args} />
+);
+
+InteractiveDatePicker.args = {
+  ...commonArgs,
+  picker: 'date',
+  placeholder: 'Placeholder',
+  showToday: true,
+};
+
+InteractiveDatePicker.argTypes = interactiveTypes;
+
+InteractiveDatePicker.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
+
+export const InteractiveRangePicker = (args: RangePickerProps) => (
+  <RangePicker {...args} />
+);
+
+InteractiveRangePicker.args = {
+  ...commonArgs,
+  allowEmpty: true,
+  showNow: true,
+  separator: '-',
+};
+
+InteractiveRangePicker.argTypes = interactiveTypes;
+
+InteractiveRangePicker.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
diff --git a/superset-frontend/src/common/components/DatePicker.tsx b/superset-frontend/src/components/DatePicker/index.tsx
similarity index 92%
rename from superset-frontend/src/common/components/DatePicker.tsx
rename to superset-frontend/src/components/DatePicker/index.tsx
index f7aadc88746..d7c254206d1 100644
--- a/superset-frontend/src/common/components/DatePicker.tsx
+++ b/superset-frontend/src/components/DatePicker/index.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatePicker as AntdDatePicker } from 'src/common/components';
+import { DatePicker as AntdDatePicker } from 'antd';
 
 export const { RangePicker } = AntdDatePicker;
 export const DatePicker = AntdDatePicker;
diff --git a/superset-frontend/src/components/ListView/Filters/DateRange.tsx b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
index b458548845e..0218fb53e64 100644
--- a/superset-frontend/src/components/ListView/Filters/DateRange.tsx
+++ b/superset-frontend/src/components/ListView/Filters/DateRange.tsx
@@ -19,7 +19,7 @@
 import React, { useState, useMemo } from 'react';
 import moment, { Moment } from 'moment';
 import { styled } from '@superset-ui/core';
-import { RangePicker as AntRangePicker } from 'src/common/components/DatePicker';
+import { RangePicker as AntRangePicker } from 'src/components/DatePicker';
 import { FilterContainer, BaseFilter, FilterTitle } from './Base';
 
 interface DateRangeFilterProps extends BaseFilter {
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
index 5ed8b476f01..56eccc4eded 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
@@ -20,7 +20,8 @@ import React from 'react';
 import { t } from '@superset-ui/core';
 import { Moment } from 'moment';
 import { isInteger } from 'lodash';
-import { Col, DatePicker, InputNumber, Row } from 'src/common/components';
+import { Col, InputNumber, Row } from 'src/common/components';
+import { DatePicker } from 'src/components/DatePicker';
 import { Radio } from 'src/common/components/Radio';
 import { Select } from 'src/components/Select';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
diff --git a/superset-frontend/src/views/CRUD/annotation/AnnotationModal.tsx b/superset-frontend/src/views/CRUD/annotation/AnnotationModal.tsx
index 13d1e11b6ef..84f14053b90 100644
--- a/superset-frontend/src/views/CRUD/annotation/AnnotationModal.tsx
+++ b/superset-frontend/src/views/CRUD/annotation/AnnotationModal.tsx
@@ -19,7 +19,7 @@
 import React, { FunctionComponent, useState, useEffect } from 'react';
 import { styled, t } from '@superset-ui/core';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
-import { RangePicker } from 'src/common/components/DatePicker';
+import { RangePicker } from 'src/components/DatePicker';
 import moment from 'moment';
 import Icon from 'src/components/Icon';
 import Modal from 'src/common/components/Modal';