You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
583 lines
77 KiB
583 lines
77 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[8242],{946968:function(Z,c,l){l.r(c);var m=l(502143),v=l(968521),g=l(720719),h=l(28840),a=l(759907),r=l(828089),_=l(825673),k=l(902068),f=l(574399),b=l(863942),E=l(316073),y=l(24628),D=l(719260),P=l(956140),u=l(127179),d=l(905388),C=l(40428),x=l(606965),A=l(268696),w=l(587302),n=l(424128),T=l(249706),j=l(795127),F=l(116846),B=l(212039),R=l(73024),M=l(553913),o=l(606641),i=l(667294),e=l(370917);function s(){var p=(0,o.eL)(),t=p.texts;return(0,e.tZ)(o.dY,null,(0,e.tZ)(i.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"\u4F55\u65F6\u4F7F\u7528"},(0,e.tZ)(n.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,e.tZ)("p",null,t[0].value),(0,e.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,e.tZ)(n.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,e.tZ)(d.Z,{items:[{demo:{id:"components-date-picker-demo-basic"},previewerProps:{title:"\u57FA\u672C",filename:"components/date-picker/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { DatePicker, Space } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const onChange = (date, dateString) => {
|
||
|
|
console.log(date, dateString);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical">
|
||
|
|
<DatePicker onChange={onChange} />
|
||
|
|
<DatePicker onChange={onChange} picker="week" />
|
||
|
|
<DatePicker onChange={onChange} picker="month" />
|
||
|
|
<DatePicker onChange={onChange} picker="quarter" />
|
||
|
|
<DatePicker onChange={onChange} picker="year" />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\uFF0C\u5728\u6D6E\u5C42\u4E2D\u53EF\u4EE5\u9009\u62E9\u6216\u8005\u8F93\u5165\u65E5\u671F\u3002</p>"}},{demo:{id:"components-date-picker-demo-range-picker"},previewerProps:{title:"\u8303\u56F4\u9009\u62E9\u5668",filename:"components/date-picker/demo/range-picker.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<RangePicker />
|
||
|
|
<RangePicker showTime />
|
||
|
|
<RangePicker picker="week" />
|
||
|
|
<RangePicker picker="month" />
|
||
|
|
<RangePicker picker="quarter" />
|
||
|
|
<RangePicker picker="year" />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7\u8BBE\u7F6E <code>picker</code> \u5C5E\u6027\uFF0C\u6307\u5B9A\u8303\u56F4\u9009\u62E9\u5668\u7C7B\u578B\u3002</p>"}},{demo:{id:"components-date-picker-demo-switchable"},previewerProps:{title:"\u5207\u6362\u4E0D\u540C\u7684\u9009\u62E9\u5668",filename:"components/date-picker/demo/switchable.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { DatePicker, Select, Space, TimePicker } from 'antd';
|
||
|
|
const { Option } = Select;
|
||
|
|
const PickerWithType = ({ type, onChange }) => {
|
||
|
|
if (type === 'time') return <TimePicker onChange={onChange} />;
|
||
|
|
if (type === 'date') return <DatePicker onChange={onChange} />;
|
||
|
|
return <DatePicker picker={type} onChange={onChange} />;
|
||
|
|
};
|
||
|
|
const App = () => {
|
||
|
|
const [type, setType] = useState('time');
|
||
|
|
return (
|
||
|
|
<Space>
|
||
|
|
<Select value={type} onChange={setType}>
|
||
|
|
<Option value="time">Time</Option>
|
||
|
|
<Option value="date">Date</Option>
|
||
|
|
<Option value="week">Week</Option>
|
||
|
|
<Option value="month">Month</Option>
|
||
|
|
<Option value="quarter">Quarter</Option>
|
||
|
|
<Option value="year">Year</Option>
|
||
|
|
</Select>
|
||
|
|
<PickerWithType type={type} onChange={(value) => console.log(value)} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u63D0\u4F9B\u9009\u62E9\u5668\uFF0C\u81EA\u7531\u5207\u6362\u4E0D\u540C\u7C7B\u578B\u7684\u65E5\u671F\u9009\u62E9\u5668\uFF0C\u5E38\u7528\u4E8E\u65E5\u671F\u7B5B\u9009\u573A\u5408\u3002</p>"}},{demo:{id:"components-date-picker-demo-format"},previewerProps:{title:"\u65E5\u671F\u683C\u5F0F",filename:"components/date-picker/demo/format.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||
|
|
dayjs.extend(customParseFormat);
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const dateFormat = 'YYYY/MM/DD';
|
||
|
|
const weekFormat = 'MM/DD';
|
||
|
|
const monthFormat = 'YYYY/MM';
|
||
|
|
|
||
|
|
/** Manually entering any of the following formats will perform date parsing */
|
||
|
|
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];
|
||
|
|
const customFormat = (value) => \`custom format: \${value.format(dateFormat)}\`;
|
||
|
|
const customWeekStartEndFormat = (value) =>
|
||
|
|
\`\${dayjs(value).startOf('week').format(weekFormat)} ~ \${dayjs(value)
|
||
|
|
.endOf('week')
|
||
|
|
.format(weekFormat)}\`;
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
|
||
|
|
<DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />
|
||
|
|
<DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker="month" />
|
||
|
|
<DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
|
||
|
|
<RangePicker
|
||
|
|
defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
|
||
|
|
format={dateFormat}
|
||
|
|
/>
|
||
|
|
<DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F7F\u7528 <code>format</code> \u5C5E\u6027\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u65E5\u671F\u663E\u793A\u683C\u5F0F\u3002\u5F53 <code>format</code> \u4E3A\u6570\u7EC4\u65F6\uFF0C\u9009\u62E9\u5668\u8F93\u5165\u6846\u53EF\u4EE5\u8F93\u5165\u6570\u7EC4\u4E2D\u4EFB\u610F\u4E00\u4E2A\u6709\u6548\u683C\u5F0F\u3002</p>"}},{demo:{id:"components-date-picker-demo-time"},previewerProps:{title:"\u65E5\u671F\u65F6\u95F4\u9009\u62E9",filename:"components/date-picker/demo/time.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const onChange = (value, dateString) => {
|
||
|
|
console.log('Selected Time: ', value);
|
||
|
|
console.log('Formatted Selected Time: ', dateString);
|
||
|
|
};
|
||
|
|
const onOk = (value) => {
|
||
|
|
console.log('onOk: ', value);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker showTime onChange={onChange} onOk={onOk} />
|
||
|
|
<RangePicker
|
||
|
|
showTime={{
|
||
|
|
format: 'HH:mm',
|
||
|
|
}}
|
||
|
|
format="YYYY-MM-DD HH:mm"
|
||
|
|
onChange={onChange}
|
||
|
|
onOk={onOk}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u589E\u52A0\u9009\u62E9\u65F6\u95F4\u529F\u80FD\uFF0C\u5F53 <code>showTime</code> \u4E3A\u4E00\u4E2A\u5BF9\u8C61\u65F6\uFF0C\u5176\u5C5E\u6027\u4F1A\u4F20\u9012\u7ED9\u5185\u5EFA\u7684 <code>TimePicker</code>\u3002</p>"}},{demo:{id:"components-date-picker-demo-disabled"},previewerProps:{title:"\u7981\u7528",filename:"components/date-picker/demo/disabled.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||
|
|
dayjs.extend(customParseFormat);
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const dateFormat = 'YYYY-MM-DD';
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker defaultValue={dayjs('2015-06-06', dateFormat)} disabled />
|
||
|
|
<DatePicker picker="month" defaultValue={dayjs('2015-06', 'YYYY-MM')} disabled />
|
||
|
|
<RangePicker
|
||
|
|
defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}
|
||
|
|
disabled
|
||
|
|
/>
|
||
|
|
<RangePicker
|
||
|
|
defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}
|
||
|
|
disabled={[false, true]}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u9009\u62E9\u6846\u7684\u4E0D\u53EF\u7528\u72B6\u6001\u3002\u4F60\u4E5F\u53EF\u4EE5\u901A\u8FC7\u6570\u7EC4\u5355\u72EC\u7981\u7528 RangePicker \u7684\u5176\u4E2D\u4E00\u9879\u3002</p>"}},{demo:{id:"components-date-picker-demo-disabled-date"},previewerProps:{title:"\u4E0D\u53EF\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4",filename:"components/date-picker/demo/disabled-date.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||
|
|
dayjs.extend(customParseFormat);
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const range = (start, end) => {
|
||
|
|
const result = [];
|
||
|
|
for (let i = start; i < end; i++) {
|
||
|
|
result.push(i);
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
|
||
|
|
// eslint-disable-next-line arrow-body-style
|
||
|
|
const disabledDate = (current) => {
|
||
|
|
// Can not select days before today and today
|
||
|
|
return current && current < dayjs().endOf('day');
|
||
|
|
};
|
||
|
|
const disabledDateTime = () => ({
|
||
|
|
disabledHours: () => range(0, 24).splice(4, 20),
|
||
|
|
disabledMinutes: () => range(30, 60),
|
||
|
|
disabledSeconds: () => [55, 56],
|
||
|
|
});
|
||
|
|
const disabledRangeTime = (_, type) => {
|
||
|
|
if (type === 'start') {
|
||
|
|
return {
|
||
|
|
disabledHours: () => range(0, 60).splice(4, 20),
|
||
|
|
disabledMinutes: () => range(30, 60),
|
||
|
|
disabledSeconds: () => [55, 56],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
disabledHours: () => range(0, 60).splice(20, 4),
|
||
|
|
disabledMinutes: () => range(0, 31),
|
||
|
|
disabledSeconds: () => [55, 56],
|
||
|
|
};
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker
|
||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
disabledDate={disabledDate}
|
||
|
|
disabledTime={disabledDateTime}
|
||
|
|
showTime={{
|
||
|
|
defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DatePicker picker="month" disabledDate={disabledDate} />
|
||
|
|
<RangePicker disabledDate={disabledDate} />
|
||
|
|
<RangePicker
|
||
|
|
disabledDate={disabledDate}
|
||
|
|
disabledTime={disabledRangeTime}
|
||
|
|
showTime={{
|
||
|
|
hideDisabledOptions: true,
|
||
|
|
defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
|
||
|
|
}}
|
||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u53EF\u7528 <code>disabledDate</code> \u548C <code>disabledTime</code> \u5206\u522B\u7981\u6B62\u9009\u62E9\u90E8\u5206\u65E5\u671F\u548C\u65F6\u95F4\uFF0C\u5176\u4E2D <code>disabledTime</code> \u9700\u8981\u548C <code>showTime</code> \u4E00\u8D77\u4F7F\u7528\u3002</p>"}},{demo:{id:"components-date-picker-demo-select-in-range"},previewerProps:{title:"\u9009\u62E9\u4E0D\u8D85\u8FC7\u4E03\u5929\u7684\u8303\u56F4",filename:"components/date-picker/demo/select-in-range.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { DatePicker } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => {
|
||
|
|
const [dates, setDates] = useState(null);
|
||
|
|
const [value, setValue] = useState(null);
|
||
|
|
const disabledDate = (current) => {
|
||
|
|
if (!dates) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
const tooLate = dates[0] && current.diff(dates[0], 'days') >= 7;
|
||
|
|
const tooEarly = dates[1] && dates[1].diff(current, 'days') >= 7;
|
||
|
|
return !!tooEarly || !!tooLate;
|
||
|
|
};
|
||
|
|
const onOpenChange = (open) => {
|
||
|
|
if (open) {
|
||
|
|
setDates([null, null]);
|
||
|
|
} else {
|
||
|
|
setDates(null);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<RangePicker
|
||
|
|
value={dates || value}
|
||
|
|
disabledDate={disabledDate}
|
||
|
|
onCalendarChange={(val) => {
|
||
|
|
setDates(val);
|
||
|
|
}}
|
||
|
|
onChange={(val) => {
|
||
|
|
setValue(val);
|
||
|
|
}}
|
||
|
|
onOpenChange={onOpenChange}
|
||
|
|
changeOnBlur
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F7F\u7528 <code>changeOnBlur</code> \u914D\u5408 <code>onCalendarChange</code> \u548C <code>disabledDate</code> \u6765\u9650\u5236\u52A8\u6001\u7684\u65E5\u671F\u533A\u95F4\u9009\u62E9\u3002</p>"}},{demo:{id:"components-date-picker-demo-preset-ranges"},previewerProps:{title:"\u9884\u8BBE\u8303\u56F4",filename:"components/date-picker/demo/preset-ranges.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const onChange = (date) => {
|
||
|
|
if (date) {
|
||
|
|
console.log('Date: ', date);
|
||
|
|
} else {
|
||
|
|
console.log('Clear');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const onRangeChange = (dates, dateStrings) => {
|
||
|
|
if (dates) {
|
||
|
|
console.log('From: ', dates[0], ', to: ', dates[1]);
|
||
|
|
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
|
||
|
|
} else {
|
||
|
|
console.log('Clear');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const rangePresets = [
|
||
|
|
{
|
||
|
|
label: 'Last 7 Days',
|
||
|
|
value: [dayjs().add(-7, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last 14 Days',
|
||
|
|
value: [dayjs().add(-14, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last 30 Days',
|
||
|
|
value: [dayjs().add(-30, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last 90 Days',
|
||
|
|
value: [dayjs().add(-90, 'd'), dayjs()],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker
|
||
|
|
presets={[
|
||
|
|
{
|
||
|
|
label: 'Yesterday',
|
||
|
|
value: dayjs().add(-1, 'd'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last Week',
|
||
|
|
value: dayjs().add(-7, 'd'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Last Month',
|
||
|
|
value: dayjs().add(-1, 'month'),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
onChange={onChange}
|
||
|
|
/>
|
||
|
|
<RangePicker presets={rangePresets} onChange={onRangeChange} />
|
||
|
|
<RangePicker
|
||
|
|
presets={rangePresets}
|
||
|
|
showTime
|
||
|
|
format="YYYY/MM/DD HH:mm:ss"
|
||
|
|
onChange={onRangeChange}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u53EF\u4EE5\u9884\u8BBE\u5E38\u7528\u7684\u65E5\u671F\u8303\u56F4\u4EE5\u63D0\u9AD8\u7528\u6237\u4F53\u9A8C\u3002</p>"}},{demo:{id:"components-date-picker-demo-extra-footer"},previewerProps:{title:"\u989D\u5916\u7684\u9875\u811A",filename:"components/date-picker/demo/extra-footer.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker renderExtraFooter={() => 'extra footer'} />
|
||
|
|
<DatePicker renderExtraFooter={() => 'extra footer'} showTime />
|
||
|
|
<RangePicker renderExtraFooter={() => 'extra footer'} />
|
||
|
|
<RangePicker renderExtraFooter={() => 'extra footer'} showTime />
|
||
|
|
<DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u5728\u6D6E\u5C42\u4E2D\u52A0\u5165\u989D\u5916\u7684\u9875\u811A\uFF0C\u4EE5\u6EE1\u8DB3\u67D0\u4E9B\u5B9A\u5236\u4FE1\u606F\u7684\u9700\u6C42\u3002</p>"}},{demo:{id:"components-date-picker-demo-size"},previewerProps:{title:"\u4E09\u79CD\u5927\u5C0F",filename:"components/date-picker/demo/size.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { DatePicker, Radio, Space } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => {
|
||
|
|
const [size, setSize] = useState('middle');
|
||
|
|
const handleSizeChange = (e) => {
|
||
|
|
setSize(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<Radio.Group value={size} onChange={handleSizeChange}>
|
||
|
|
<Radio.Button value="large">Large</Radio.Button>
|
||
|
|
<Radio.Button value="middle">middle</Radio.Button>
|
||
|
|
<Radio.Button value="small">Small</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
<DatePicker size={size} />
|
||
|
|
<DatePicker size={size} picker="month" />
|
||
|
|
<RangePicker size={size} />
|
||
|
|
<DatePicker size={size} picker="week" />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4E09\u79CD\u5927\u5C0F\u7684\u8F93\u5165\u6846\uFF0C\u82E5\u4E0D\u8BBE\u7F6E\uFF0C\u5219\u4E3A <code>middle</code>\u3002</p>"}},{demo:{id:"components-date-picker-demo-cell-render"},previewerProps:{title:"\u5B9A\u5236\u5355\u5143\u683C",filename:"components/date-picker/demo/cell-render.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { DatePicker, Space } from 'antd';
|
||
|
|
import React from 'react';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker
|
||
|
|
cellRender={(current, info) => {
|
||
|
|
if (info.type !== 'date') return info.originNode;
|
||
|
|
const style = {};
|
||
|
|
if (current.date() === 1) {
|
||
|
|
style.border = '1px solid #1677ff';
|
||
|
|
style.borderRadius = '50%';
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div className="ant-picker-cell-inner" style={style}>
|
||
|
|
{current.date()}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<RangePicker
|
||
|
|
cellRender={(current, info) => {
|
||
|
|
if (info.type !== 'date') return info.originNode;
|
||
|
|
const style = {};
|
||
|
|
if (current.date() === 1) {
|
||
|
|
style.border = '1px solid #1677ff';
|
||
|
|
style.borderRadius = '50%';
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div className="ant-picker-cell-inner" style={style}>
|
||
|
|
{current.date()}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F7F\u7528 <code>cellRender</code> \u53EF\u4EE5\u81EA\u5B9A\u4E49\u5355\u5143\u683C\u7684\u5185\u5BB9\u548C\u6837\u5F0F\u3002</p>"}},{demo:{id:"components-date-picker-demo-status"},previewerProps:{title:"\u81EA\u5B9A\u4E49\u72B6\u6001",filename:"components/date-picker/demo/status.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Space
|
||
|
|
direction="vertical"
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DatePicker
|
||
|
|
status="error"
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DatePicker
|
||
|
|
status="warning"
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DatePicker.RangePicker
|
||
|
|
status="error"
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DatePicker.RangePicker
|
||
|
|
status="warning"
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u4F7F\u7528 <code>status</code> \u4E3A DatePicker \u6DFB\u52A0\u72B6\u6001\uFF0C\u53EF\u9009 <code>error</code> \u6216\u8005 <code>warning</code>\u3002</p>"}},{demo:{id:"components-date-picker-demo-bordered"},previewerProps:{title:"\u65E0\u8FB9\u6846",filename:"components/date-picker/demo/bordered.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker bordered={false} />
|
||
|
|
<DatePicker picker="week" bordered={false} />
|
||
|
|
<DatePicker picker="month" bordered={false} />
|
||
|
|
<DatePicker picker="year" bordered={false} />
|
||
|
|
<RangePicker bordered={false} />
|
||
|
|
<RangePicker picker="week" bordered={false} />
|
||
|
|
<RangePicker picker="month" bordered={false} />
|
||
|
|
<RangePicker picker="year" bordered={false} />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u65E0\u8FB9\u6846\u6837\u5F0F\u3002</p>"}},{demo:{id:"components-date-picker-demo-placement"},previewerProps:{title:"\u5F39\u51FA\u4F4D\u7F6E",filename:"components/date-picker/demo/placement.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { DatePicker, Radio } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const App = () => {
|
||
|
|
const [placement, SetPlacement] = useState('topLeft');
|
||
|
|
const placementChange = (e) => {
|
||
|
|
SetPlacement(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Radio.Group value={placement} onChange={placementChange}>
|
||
|
|
<Radio.Button value="topLeft">topLeft</Radio.Button>
|
||
|
|
<Radio.Button value="topRight">topRight</Radio.Button>
|
||
|
|
<Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
|
||
|
|
<Radio.Button value="bottomRight">bottomRight</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<DatePicker placement={placement} />
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<RangePicker placement={placement} />
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u53EF\u4EE5\u901A\u8FC7 <code>placement</code> \u624B\u52A8\u6307\u5B9A\u5F39\u51FA\u7684\u4F4D\u7F6E\u3002</p>"}},{demo:{id:"components-date-picker-demo-mode"},previewerProps:{debug:!0,title:"\u53D7\u63A7\u9762\u677F",filename:"components/date-picker/demo/mode.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const ControlledDatePicker = () => {
|
||
|
|
const [mode, setMode] = useState('time');
|
||
|
|
const handleOpenChange = (open) => {
|
||
|
|
if (open) {
|
||
|
|
setMode('time');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handlePanelChange = (_, newMode) => {
|
||
|
|
setMode(newMode);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<DatePicker
|
||
|
|
mode={mode}
|
||
|
|
showTime
|
||
|
|
onOpenChange={handleOpenChange}
|
||
|
|
onPanelChange={handlePanelChange}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const ControlledRangePicker = () => {
|
||
|
|
const [mode, setMode] = useState(['month', 'month']);
|
||
|
|
const [value, setValue] = useState([null, null]);
|
||
|
|
const handlePanelChange = (newValue, newModes) => {
|
||
|
|
setValue(newValue);
|
||
|
|
setMode([
|
||
|
|
newModes[0] === 'date' ? 'month' : newModes[0],
|
||
|
|
newModes[1] === 'date' ? 'month' : newModes[1],
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<RangePicker
|
||
|
|
placeholder={['Start month', 'End month']}
|
||
|
|
format="YYYY-MM"
|
||
|
|
value={value}
|
||
|
|
mode={mode}
|
||
|
|
onChange={setValue}
|
||
|
|
onPanelChange={handlePanelChange}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<ControlledDatePicker />
|
||
|
|
<ControlledRangePicker />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u901A\u8FC7\u7EC4\u5408 <code>mode</code> \u4E0E <code>onPanelChange</code> \u63A7\u5236\u8981\u5C55\u793A\u7684\u9762\u677F\u3002</p>"}},{demo:{id:"components-date-picker-demo-start-end"},previewerProps:{debug:!0,title:"\u81EA\u5B9A\u4E49\u65E5\u671F\u8303\u56F4\u9009\u62E9",filename:"components/date-picker/demo/start-end.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [startValue, setStartValue] = useState(null);
|
||
|
|
const [endValue, setEndValue] = useState(null);
|
||
|
|
const [endOpen, setEndOpen] = useState(false);
|
||
|
|
const disabledStartDate = (startDate) => {
|
||
|
|
if (!startDate || !endValue) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return startDate.valueOf() > endValue.valueOf();
|
||
|
|
};
|
||
|
|
const disabledEndDate = (endDate) => {
|
||
|
|
if (!endDate || !startValue) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return endDate.valueOf() <= startValue.valueOf();
|
||
|
|
};
|
||
|
|
const handleStartOpenChange = (open) => {
|
||
|
|
if (!open) {
|
||
|
|
setEndOpen(true);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const handleEndOpenChange = (open) => {
|
||
|
|
setEndOpen(open);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Space>
|
||
|
|
<DatePicker
|
||
|
|
disabledDate={disabledStartDate}
|
||
|
|
showTime
|
||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
value={startValue}
|
||
|
|
placeholder="Start"
|
||
|
|
onChange={setStartValue}
|
||
|
|
onOpenChange={handleStartOpenChange}
|
||
|
|
/>
|
||
|
|
<DatePicker
|
||
|
|
disabledDate={disabledEndDate}
|
||
|
|
showTime
|
||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
value={endValue}
|
||
|
|
placeholder="End"
|
||
|
|
onChange={setEndValue}
|
||
|
|
open={endOpen}
|
||
|
|
onOpenChange={handleEndOpenChange}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:`<p>\u5F53 <code>RangePicker</code> \u65E0\u6CD5\u6EE1\u8DB3\u4E1A\u52A1\u9700\u6C42\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528\u4E24\u4E2A <code>DatePicker</code> \u5B9E\u73B0\u7C7B\u4F3C\u7684\u529F\u80FD\u3002</p>
|
||
|
|
<blockquote>
|
||
|
|
<ul>
|
||
|
|
<li>\u901A\u8FC7\u8BBE\u7F6E <code>disabledDate</code> \u65B9\u6CD5\uFF0C\u6765\u7EA6\u675F\u5F00\u59CB\u548C\u7ED3\u675F\u65E5\u671F\u3002</li>
|
||
|
|
<li>\u901A\u8FC7 <code>open</code> <code>onOpenChange</code> \u6765\u4F18\u5316\u4EA4\u4E92\u3002</li>
|
||
|
|
</ul>
|
||
|
|
</blockquote>`}},{demo:{id:"components-date-picker-demo-suffix"},previewerProps:{debug:!0,title:"\u540E\u7F00\u56FE\u6807",filename:"components/date-picker/demo/suffix.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { SmileOutlined } from '@ant-design/icons';
|
||
|
|
import { DatePicker, Space } from 'antd';
|
||
|
|
const smileIcon = <SmileOutlined />;
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const onChange = (date, dateString) => {
|
||
|
|
console.log(date, dateString);
|
||
|
|
};
|
||
|
|
const App = () => (
|
||
|
|
<Space direction="vertical" size={12}>
|
||
|
|
<DatePicker suffixIcon={smileIcon} onChange={onChange} />
|
||
|
|
<DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />
|
||
|
|
<RangePicker suffixIcon={smileIcon} onChange={onChange} />
|
||
|
|
<DatePicker suffixIcon={smileIcon} onChange={onChange} picker="week" />
|
||
|
|
<DatePicker suffixIcon="ab" onChange={onChange} />
|
||
|
|
<DatePicker suffixIcon="ab" onChange={onChange} picker="month" />
|
||
|
|
<RangePicker suffixIcon="ab" onChange={onChange} />
|
||
|
|
<DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
|
||
|
|
</Space>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\uFF0C\u5728\u6D6E\u5C42\u4E2D\u53EF\u4EE5\u9009\u62E9\u6216\u8005\u8F93\u5165\u65E5\u671F\u3002</p>"}},{demo:{id:"components-date-picker-demo-render-panel"},previewerProps:{debug:!0,title:"_InternalPanelDoNotUseOrYouWillBeFired",filename:"components/date-picker/demo/render-panel.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { DatePicker } from 'antd';
|
||
|
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDatePicker } = DatePicker;
|