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.
297 lines
23 KiB
297 lines
23 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[3880],{620761:function(m,o,t){t.r(o);var p=t(502143),h=t(968521),v=t(720719),g=t(28840),l=t(759907),c=t(828089),Z=t(825673),f=t(902068),y=t(574399),C=t(863942),b=t(316073),D=t(24628),x=t(719260),P=t(956140),s=t(127179),i=t(905388),w=t(40428),E=t(606965),k=t(268696),T=t(587302),r=t(424128),M=t(249706),O=t(795127),R=t(116846),A=t(212039),L=t(73024),I=t(553913),a=t(606641),d=t(667294),e=t(370917);function u(){var _=(0,a.eL)(),n=_.texts;return(0,e.tZ)(a.dY,null,(0,e.tZ)(d.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(i.Z,{items:[{demo:{id:"components-calendar-demo-basic"},previewerProps:{clientonly:!0,title:"Basic",filename:"components/calendar/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 React from 'react';
|
|
import { Calendar } from 'antd';
|
|
const App = () => {
|
|
const onPanelChange = (value, mode) => {
|
|
console.log(value.format('YYYY-MM-DD'), mode);
|
|
};
|
|
return <Calendar onPanelChange={onPanelChange} />;
|
|
};
|
|
export default App;
|
|
`,description:"<p>A basic calendar component with Year/Month switch.</p>"}},{demo:{id:"components-calendar-demo-notice-calendar"},previewerProps:{clientonly:!0,title:"Notice Calendar",filename:"components/calendar/demo/notice-calendar.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 { Badge, Calendar } from 'antd';
|
|
const getListData = (value) => {
|
|
let listData;
|
|
switch (value.date()) {
|
|
case 8:
|
|
listData = [
|
|
{
|
|
type: 'warning',
|
|
content: 'This is warning event.',
|
|
},
|
|
{
|
|
type: 'success',
|
|
content: 'This is usual event.',
|
|
},
|
|
];
|
|
break;
|
|
case 10:
|
|
listData = [
|
|
{
|
|
type: 'warning',
|
|
content: 'This is warning event.',
|
|
},
|
|
{
|
|
type: 'success',
|
|
content: 'This is usual event.',
|
|
},
|
|
{
|
|
type: 'error',
|
|
content: 'This is error event.',
|
|
},
|
|
];
|
|
break;
|
|
case 15:
|
|
listData = [
|
|
{
|
|
type: 'warning',
|
|
content: 'This is warning event',
|
|
},
|
|
{
|
|
type: 'success',
|
|
content: 'This is very long usual event\u3002\u3002....',
|
|
},
|
|
{
|
|
type: 'error',
|
|
content: 'This is error event 1.',
|
|
},
|
|
{
|
|
type: 'error',
|
|
content: 'This is error event 2.',
|
|
},
|
|
{
|
|
type: 'error',
|
|
content: 'This is error event 3.',
|
|
},
|
|
{
|
|
type: 'error',
|
|
content: 'This is error event 4.',
|
|
},
|
|
];
|
|
break;
|
|
default:
|
|
}
|
|
return listData || [];
|
|
};
|
|
const getMonthData = (value) => {
|
|
if (value.month() === 8) {
|
|
return 1394;
|
|
}
|
|
};
|
|
const App = () => {
|
|
const monthCellRender = (value) => {
|
|
const num = getMonthData(value);
|
|
return num ? (
|
|
<div className="notes-month">
|
|
<section>{num}</section>
|
|
<span>Backlog number</span>
|
|
</div>
|
|
) : null;
|
|
};
|
|
const dateCellRender = (value) => {
|
|
const listData = getListData(value);
|
|
return (
|
|
<ul className="events">
|
|
{listData.map((item) => (
|
|
<li key={item.content}>
|
|
<Badge status={item.type} text={item.content} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
const cellRender = (current, info) => {
|
|
if (info.type === 'date') return dateCellRender(current);
|
|
if (info.type === 'month') return monthCellRender(current);
|
|
return info.originNode;
|
|
};
|
|
return <Calendar cellRender={cellRender} />;
|
|
};
|
|
export default App;
|
|
`,description:"<p>This component can be rendered by using <code>dateCellRender</code> and <code>monthCellRender</code> with the data you need.</p>",style:`.events {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.events .ant-badge-status {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.notes-month {
|
|
font-size: 28px;
|
|
text-align: center;
|
|
}
|
|
.notes-month section {
|
|
font-size: 28px;
|
|
}`}},{demo:{id:"components-calendar-demo-card"},previewerProps:{clientonly:!0,title:"Card",filename:"components/calendar/demo/card.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 { Calendar, theme } from 'antd';
|
|
import React from 'react';
|
|
const onPanelChange = (value, mode) => {
|
|
console.log(value.format('YYYY-MM-DD'), mode);
|
|
};
|
|
const App = () => {
|
|
const { token } = theme.useToken();
|
|
const wrapperStyle = {
|
|
width: 300,
|
|
border: \`1px solid \${token.colorBorderSecondary}\`,
|
|
borderRadius: token.borderRadiusLG,
|
|
};
|
|
return (
|
|
<div style={wrapperStyle}>
|
|
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Nested inside a container element for rendering in limited space.</p>"}},{demo:{id:"components-calendar-demo-select"},previewerProps:{clientonly:!0,title:"Selectable Calendar",filename:"components/calendar/demo/select.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 { Alert, Calendar } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
const App = () => {
|
|
const [value, setValue] = useState(() => dayjs('2017-01-25'));
|
|
const [selectedValue, setSelectedValue] = useState(() => dayjs('2017-01-25'));
|
|
const onSelect = (newValue) => {
|
|
setValue(newValue);
|
|
setSelectedValue(newValue);
|
|
};
|
|
const onPanelChange = (newValue) => {
|
|
setValue(newValue);
|
|
};
|
|
return (
|
|
<>
|
|
<Alert message={\`You selected date: \${selectedValue?.format('YYYY-MM-DD')}\`} />
|
|
<Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>A basic calendar component with Year/Month switch.</p>"}},{demo:{id:"components-calendar-demo-customize-header"},previewerProps:{clientonly:!0,title:"Customize Header",filename:"components/calendar/demo/customize-header.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 dayjs from 'dayjs';
|
|
import 'dayjs/locale/zh-cn';
|
|
import dayLocaleData from 'dayjs/plugin/localeData';
|
|
import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
|
|
dayjs.extend(dayLocaleData);
|
|
const App = () => {
|
|
const { token } = theme.useToken();
|
|
const onPanelChange = (value, mode) => {
|
|
console.log(value.format('YYYY-MM-DD'), mode);
|
|
};
|
|
const wrapperStyle = {
|
|
width: 300,
|
|
border: \`1px solid \${token.colorBorderSecondary}\`,
|
|
borderRadius: token.borderRadiusLG,
|
|
};
|
|
return (
|
|
<div style={wrapperStyle}>
|
|
<Calendar
|
|
fullscreen={false}
|
|
headerRender={({ value, type, onChange, onTypeChange }) => {
|
|
const start = 0;
|
|
const end = 12;
|
|
const monthOptions = [];
|
|
let current = value.clone();
|
|
const localeData = value.localeData();
|
|
const months = [];
|
|
for (let i = 0; i < 12; i++) {
|
|
current = current.month(i);
|
|
months.push(localeData.monthsShort(current));
|
|
}
|
|
for (let i = start; i < end; i++) {
|
|
monthOptions.push(
|
|
<Select.Option key={i} value={i} className="month-item">
|
|
{months[i]}
|
|
</Select.Option>,
|
|
);
|
|
}
|
|
const year = value.year();
|
|
const month = value.month();
|
|
const options = [];
|
|
for (let i = year - 10; i < year + 10; i += 1) {
|
|
options.push(
|
|
<Select.Option key={i} value={i} className="year-item">
|
|
{i}
|
|
</Select.Option>,
|
|
);
|
|
}
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: 8,
|
|
}}
|
|
>
|
|
<Typography.Title level={4}>Custom header</Typography.Title>
|
|
<Row gutter={8}>
|
|
<Col>
|
|
<Radio.Group
|
|
size="small"
|
|
onChange={(e) => onTypeChange(e.target.value)}
|
|
value={type}
|
|
>
|
|
<Radio.Button value="month">Month</Radio.Button>
|
|
<Radio.Button value="year">Year</Radio.Button>
|
|
</Radio.Group>
|
|
</Col>
|
|
<Col>
|
|
<Select
|
|
size="small"
|
|
dropdownMatchSelectWidth={false}
|
|
className="my-year-select"
|
|
value={year}
|
|
onChange={(newYear) => {
|
|
const now = value.clone().year(newYear);
|
|
onChange(now);
|
|
}}
|
|
>
|
|
{options}
|
|
</Select>
|
|
</Col>
|
|
<Col>
|
|
<Select
|
|
size="small"
|
|
dropdownMatchSelectWidth={false}
|
|
value={month}
|
|
onChange={(newMonth) => {
|
|
const now = value.clone().month(newMonth);
|
|
onChange(now);
|
|
}}
|
|
>
|
|
{monthOptions}
|
|
</Select>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}}
|
|
onPanelChange={onPanelChange}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Customize Calendar header content.</p>"}},{demo:{id:"components-calendar-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/calendar/demo/component-token.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 { Calendar, ConfigProvider } from 'antd';
|
|
import React from 'react';
|
|
|
|
/** Test usage. Do not use in your production. */
|
|
export default () => {
|
|
const onPanelChange = (value, mode) => {
|
|
console.log(value.format('YYYY-MM-DD'), mode);
|
|
};
|
|
return (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Calendar: {
|
|
fullBg: 'red',
|
|
fullPanelBg: 'green',
|
|
itemActiveBg: 'black',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Calendar onPanelChange={onPanelChange} />
|
|
<br />
|
|
<Calendar onPanelChange={onPanelChange} fullscreen={false} />
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("p",null,(0,e.tZ)("strong",null,n[2].value),n[3].value,(0,e.tZ)("code",null,n[4].value),n[5].value,(0,e.tZ)("code",null,n[6].value),n[7].value),(0,e.tZ)(l.Z,{lang:"jsx"},n[8].value),(0,e.tZ)(c.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[9].value),(0,e.tZ)("th",null,n[10].value),(0,e.tZ)("th",null,n[11].value),(0,e.tZ)("th",null,n[12].value),(0,e.tZ)("th",null,n[13].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null,n[20].value),(0,e.tZ)("td",null,n[21].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[22].value),(0,e.tZ)("td",null,n[23].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{href:"https://day.js.org/",sourceType:"a"},n[24].value)),(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[26].value),(0,e.tZ)("td",null,n[27].value,(0,e.tZ)("code",null,n[28].value),n[29].value,(0,e.tZ)("code",null,n[30].value),n[31].value,(0,e.tZ)(r.Z,{href:"https://github.com/ant-design/ant-design/issues/30987",sourceType:"a"},n[32].value),n[33].value),(0,e.tZ)("td",null,n[34].value),(0,e.tZ)("td",null,n[35].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",null,n[37].value),(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[40].value),(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,n[42].value),(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{href:"https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json",sourceType:"a"},n[47].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[48].value),(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[50].value),n[51].value,(0,e.tZ)("code",null,n[52].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[53].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[54].value),(0,e.tZ)("td",null,n[55].value),(0,e.tZ)("td",null,n[56].value),(0,e.tZ)("td",null,n[57].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[58].value),(0,e.tZ)("td",null,n[59].value),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,n[64].value,(0,e.tZ)(r.Z,{href:"https://day.js.org/",sourceType:"a"},n[65].value),n[66].value,(0,e.tZ)(r.Z,{href:"https://day.js.org/",sourceType:"a"},n[67].value),n[68].value),(0,e.tZ)("td",null,n[69].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[70].value),(0,e.tZ)("td",null,n[71].value),(0,e.tZ)("td",null,(0,e.tZ)(r.Z,{href:"https://day.js.org/",sourceType:"a"},n[72].value)),(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[74].value),(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value),(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[78].value),(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,n[81].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[82].value),(0,e.tZ)("td",null,n[83].value),(0,e.tZ)("td",null,n[84].value),(0,e.tZ)("td",null,n[85].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[86].value),n[87].value)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(s.Z,{component:"Calendar"}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"faq"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#faq",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"FAQ"),(0,e.tZ)("h3",{id:"how-to-use-calendar-with-customize-date-library"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-use-calendar-with-customize-date-library",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"How to use Calendar with customize date library?"),(0,e.tZ)("p",null,n[88].value,(0,e.tZ)(r.Z,{to:"/docs/react/use-custom-date-library#calendar",sourceType:"Link"},n[89].value)),(0,e.tZ)("h3",{id:"how-to-set-locale-for-date-related-components"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-set-locale-for-date-related-components",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"How to set locale for date-related components?"),(0,e.tZ)("p",null,n[90].value,(0,e.tZ)(r.Z,{to:"/components/date-picker/#localization",sourceType:"Link"},n[91].value)),(0,e.tZ)("h3",{id:"date-related-components-locale-is-not-working"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#date-related-components-locale-is-not-working",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Date-related components locale is not working?"),(0,e.tZ)("p",null,n[92].value,(0,e.tZ)(r.Z,{to:"/docs/react/faq#date-related-components-locale-is-not-working",sourceType:"Link"},n[93].value)),(0,e.tZ)("h3",{id:"how-to-get-date-from-panel-click"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-get-date-from-panel-click",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"How to get date from panel click?"),(0,e.tZ)("p",null,(0,e.tZ)("code",null,n[94].value),n[95].value,(0,e.tZ)("code",null,n[96].value),n[97].value),(0,e.tZ)(l.Z,{lang:"tsx"},n[98].value))))}o.default=u}}]);
|
|
|