diff --git a/.dumirc.ts b/.dumirc.ts
index 9bf3103af..adedc3fc9 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -160,6 +160,7 @@ export default defineConfig({
             { title: 'InputNumber 数字输入框', link: '/components/input-number' },
             { title: 'Radio 单选框', link: '/components/radio' },
             { title: 'Checkbox 多选框', link: '/components/checkbox' },
+            { title: 'DatePicker 日期选择框', link: '/components/date-picker' },
             { title: 'Switch 开关', link: '/components/switch' },
             { title: 'Select 选择器', link: '/components/select' },
             { title: 'TreeSelect 树选择', link: '/components/tree-select' },
diff --git a/packages/design/src/date-picker/demo/basic.tsx b/packages/design/src/date-picker/demo/basic.tsx
new file mode 100644
index 000000000..83cf516b5
--- /dev/null
+++ b/packages/design/src/date-picker/demo/basic.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { DatePicker, Space } from '@oceanbase/design';
+import type { DatePickerProps } from '@oceanbase/design';
+
+const onChange: DatePickerProps['onChange'] = (date, dateString) => {
+  console.log(date, dateString);
+};
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <DatePicker onChange={onChange} />
+    <DatePicker onChange={onChange} showTime />
+    <DatePicker onChange={onChange} picker="week" />
+    <DatePicker onChange={onChange} picker="month" />
+    <DatePicker onChange={onChange} picker="quarter" />
+    <DatePicker onChange={onChange} picker="year" />
+  </Space>
+);
+
+export default App;
diff --git a/packages/design/src/date-picker/demo/ranger-picker.tsx b/packages/design/src/date-picker/demo/ranger-picker.tsx
new file mode 100644
index 000000000..01fbdd318
--- /dev/null
+++ b/packages/design/src/date-picker/demo/ranger-picker.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { DatePicker, Space } from '@oceanbase/design';
+
+const { RangePicker } = DatePicker;
+
+const App: React.FC = () => (
+  <Space direction="vertical" size={12}>
+    <RangePicker />
+    <RangePicker showTime />
+    <RangePicker picker="week" />
+    <RangePicker picker="month" />
+    <RangePicker picker="quarter" />
+    <RangePicker picker="year" />
+  </Space>
+);
+
+export default App;
diff --git a/packages/design/src/date-picker/index.md b/packages/design/src/date-picker/index.md
new file mode 100644
index 000000000..44ff6b092
--- /dev/null
+++ b/packages/design/src/date-picker/index.md
@@ -0,0 +1,21 @@
+---
+title: DatePicker 日期选择框
+nav:
+  title: 基础组件
+  path: /components
+demo:
+  cols: 2
+---
+
+- 🔥 完全继承 antd [DatePicker](https://ant.design/components/date-picker-cn) 的能力和 API，可无缝切换。
+- 💄 定制主题和样式，符合 OceanBase Design 设计规范。
+
+## 代码演示
+
+<!-- prettier-ignore -->
+<code src="./demo/basic.tsx" title="选择器"></code> 
+<code src="./demo/ranger-picker.tsx" title="范围选择器"></code>
+
+## API
+
+- 详见 antd DatePicker 文档: https://ant.design/components/date-picker-cn