mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
982871522b
* added new calendar api, renderHeader now we can customize calendar header * fixed typo for tests * error handling for renderHeader * covering all cases with tests * fixed tests and change console error to warning * fixed feedbacks and code optimization * cleanup callback function arguments * removed unused changes * fixed tests * added extra classes * fixed some comments * tying to fix test for remote * tying to fix test for remote in my local machin it works fine * tying to fix test for remote in my local machin it works fine * tying to fix test for remote in my local machin it works fine * updated test snapshots * fixed comment * fixed linting * fixed some texts * added header for CN and added argument types * removed extra row
2.9 KiB
2.9 KiB
order | title | ||||
---|---|---|---|---|---|
4 |
|
zh-CN
自定义日历头部内容。
en-US
Customize Calendar header content.
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,
);