90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
|
import { Col, Radio, Row, Select } from 'antd';
|
||
|
|
import { Dayjs } from 'dayjs';
|
||
|
|
import { Lunar } from 'lunar-typescript';
|
||
|
|
import { FC } from 'react';
|
||
|
|
|
||
|
|
const getYearLabel = (year: number) => {
|
||
|
|
const d = Lunar.fromDate(new Date(year + 1, 0));
|
||
|
|
return `${d.getYearInChinese()}年（${d.getYearInGanZhi()}${d.getYearShengXiao()}年）`;
|
||
|
|
};
|
||
|
|
|
||
|
|
const getMonthLabel = (month: number, value: Dayjs) => {
|
||
|
|
const d = Lunar.fromDate(new Date(value.year(), month));
|
||
|
|
const lunar = d.getMonthInChinese();
|
||
|
|
return `${month + 1}月（${lunar}月）`;
|
||
|
|
};
|
||
|
|
interface CustomHeaderProps {
|
||
|
|
value: Dayjs;
|
||
|
|
type: string;
|
||
|
|
onChange: (date: Dayjs) => void;
|
||
|
|
onTypeChange: (e: any) => void;
|
||
|
|
}
|
||
|
|
const CustomHeader: FC<CustomHeaderProps> = ({ value, type, onChange, onTypeChange }) => {
|
||
|
|
const start = 0;
|
||
|
|
const end = 12;
|
||
|
|
const monthOptions = [];
|
||
|
|
|
||
|
|
let current = value.clone();
|
||
|
|
const localeDate = (value as any).localeData();
|
||
|
|
const months = [];
|
||
|
|
for (let i = 0; i < 12; i++) {
|
||
|
|
current = current.month(i);
|
||
|
|
months.push(localeDate.monthsShort(current));
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = start; i < end; i++) {
|
||
|
|
monthOptions.push({
|
||
|
|
label: getMonthLabel(i, value),
|
||
|
|
value: i,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const year = value.year();
|
||
|
|
const month = value.month();
|
||
|
|
const options = [];
|
||
|
|
for (let i = year - 10; i < year + 10; i += 1) {
|
||
|
|
options.push({
|
||
|
|
label: getYearLabel(i),
|
||
|
|
value: i,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<Row justify="end" gutter={8} style={{ padding: 8 }}>
|
||
|
|
<Col>
|
||
|
|
<Select
|
||
|
|
size="small"
|
||
|
|
className="my-year-select"
|
||
|
|
value={year}
|
||
|
|
options={options}
|
||
|
|
onChange={(newYear) => {
|
||
|
|
const now = value.clone().year(newYear);
|
||
|
|
onChange(now);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col>
|
||
|
|
<Select
|
||
|
|
size="small"
|
||
|
|
value={month}
|
||
|
|
options={monthOptions}
|
||
|
|
onChange={(newMonth) => {
|
||
|
|
const now = value.clone().month(newMonth);
|
||
|
|
onChange(now);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</Col>
|
||
|
|
<Col>
|
||
|
|
<Radio.Group
|
||
|
|
size="small"
|
||
|
|
onChange={(e) => onTypeChange(e.target.value)}
|
||
|
|
value={type}
|
||
|
|
>
|
||
|
|
<Radio.Button value="month">月</Radio.Button>
|
||
|
|
<Radio.Button value="year">年</Radio.Button>
|
||
|
|
</Radio.Group>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default CustomHeader;
|