-
-
-
-
-
-
-
- );
-}
-
-function PickerWithType({ type, onChange }) {
- if (type === 'time') return
;
- if (type === 'date') return
;
- return
;
-}
-
-function SwitchablePicker() {
- const [type, setType] = React.useState('time');
- const onChange = value => {
- console.log(value);
- };
- return (
-
-
-
-
- );
+function onChange(date, dateString) {
+ console.log(date, dateString);
}
ReactDOM.render(
-
-
-
+
+
+
+
+
+
,
mountNode,
);
diff --git a/components/date-picker/demo/switchable.md b/components/date-picker/demo/switchable.md
new file mode 100644
index 000000000000..6a2131d786be
--- /dev/null
+++ b/components/date-picker/demo/switchable.md
@@ -0,0 +1,46 @@
+---
+order: 1.1
+title:
+ zh-CN: 切换不同的选择器
+ en-US: Switchable picker
+---
+
+## zh-CN
+
+提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。
+
+## en-US
+
+Switch in different types of pickers by Select.
+
+```jsx
+import React, { useState } from 'react';
+import { DatePicker, TimePicker, Select, Space } from 'antd';
+
+const { Option } = Select;
+
+function PickerWithType({ type, onChange }) {
+ if (type === 'time') return ;
+ if (type === 'date') return ;
+ return ;
+}
+
+function SwitchablePicker() {
+ const [type, setType] = useState('time');
+ return (
+
+
+ console.log(value)} />
+
+ );
+}
+
+ReactDOM.render(, mountNode);
+```