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.
110 lines
3.3 KiB
110 lines
3.3 KiB
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 { CalendarMode } from 'antd/es/calendar/generateCalendar';
|
|
|
|
dayjs.extend(dayLocaleData);
|
|
|
|
const App: React.FC = () => {
|
|
const { token } = theme.useToken();
|
|
|
|
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
|
|
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;
|
|
|