mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
108 lines
2.9 KiB
Markdown
108 lines
2.9 KiB
Markdown
|
---
|
||
|
order: 4
|
||
|
title:
|
||
|
zh-CN: 自定义头部
|
||
|
en-US: Customize Header
|
||
|
---
|
||
|
|
||
|
## zh-CN
|
||
|
|
||
|
自定义日历头部内容。
|
||
|
|
||
|
## en-US
|
||
|
|
||
|
Customize Calendar header content.
|
||
|
|
||
|
```jsx
|
||
|
import { Calendar, Select, Radio, Col, Row } from 'antd';
|
||
|
|
||
|
const { Group, Button } = Radio;
|
||
|
|
||
|
function onPanelChange(value, mode) {
|
||
|
console.log(value, mode);
|
||
|
}
|
||
|
|
||
|
ReactDOM.render(
|
||
|
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
||
|
<Calendar
|
||
|
fullscreen={false}
|
||
|
headerRender={({ value, type, onChange, onTypeChange }) => {
|
||
|
const start = 0;
|
||
|
const end = 12;
|
||
|
const monthOptions = [];
|
||
|
|
||
|
const current = value.clone();
|
||
|
const localeData = value.localeData();
|
||
|
const months = [];
|
||
|
for (let i = 0; i < 12; i++) {
|
||
|
current.month(i);
|
||
|
months.push(localeData.monthsShort(current));
|
||
|
}
|
||
|
|
||
|
for (let index = start; index < end; index++) {
|
||
|
monthOptions.push(
|
||
|
<Select.Option className="month-item" key={`${index}`}>
|
||
|
{months[index]}
|
||
|
</Select.Option>,
|
||
|
);
|
||
|
}
|
||
|
const month = value.month();
|
||
|
|
||
|
const year = value.year();
|
||
|
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: 10 }}>
|
||
|
<div style={{ marginBottom: '10px' }}>Custom header </div>
|
||
|
<Row type="flex" justify="space-between">
|
||
|
<Col>
|
||
|
<Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
|
||
|
<Button value="month">Month</Button>
|
||
|
<Button value="year">Year</Button>
|
||
|
</Group>
|
||
|
</Col>
|
||
|
<Col>
|
||
|
<Select
|
||
|
size="small"
|
||
|
dropdownMatchSelectWidth={false}
|
||
|
className="my-year-select"
|
||
|
onChange={newYear => {
|
||
|
const now = value.clone().year(newYear);
|
||
|
onChange(now);
|
||
|
}}
|
||
|
value={String(year)}
|
||
|
>
|
||
|
{options}
|
||
|
</Select>
|
||
|
</Col>
|
||
|
<Col>
|
||
|
<Select
|
||
|
size="small"
|
||
|
dropdownMatchSelectWidth={false}
|
||
|
value={String(month)}
|
||
|
onChange={selectedMonth => {
|
||
|
const newValue = value.clone();
|
||
|
newValue.month(parseInt(selectedMonth, 10));
|
||
|
onChange(newValue);
|
||
|
}}
|
||
|
>
|
||
|
{monthOptions}
|
||
|
</Select>
|
||
|
</Col>
|
||
|
</Row>
|
||
|
</div>
|
||
|
);
|
||
|
}}
|
||
|
onPanelChange={onPanelChange}
|
||
|
/>
|
||
|
</div>,
|
||
|
mountNode,
|
||
|
);
|
||
|
```
|