/** * live: false */ import React from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; import type { Dayjs } from 'dayjs'; import dayLocaleData from 'dayjs/plugin/localeData'; import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd'; import type { CalendarProps } from 'antd'; dayjs.extend(dayLocaleData); const App: React.FC = () => { const { token } = theme.useToken(); const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; const wrapperStyle: React.CSSProperties = { width: 300, border: `1px solid ${token.colorBorderSecondary}`, borderRadius: token.borderRadiusLG, }; return (
{ 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( {months[i]} , ); } const year = value.year(); const month = value.month(); const options = []; for (let i = year - 10; i < year + 10; i += 1) { options.push( {i} , ); } return (
Custom header onTypeChange(e.target.value)} value={type} > Month Year
); }} onPanelChange={onPanelChange} />
); }; export default App;