Merge pull request #852 from oceanbase/dengfuping-dev

feat(design): Add DatePicker docs and demos

.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' },

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;

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;

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