mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
951 B
951 B
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
一个通用的日历面板,支持年/月切换。
en-US
A basic calendar component with Year/Month switch.
import React, { useState } from 'react';
import { Calendar, Alert } from 'antd';
import dayjs from 'dayjs';
export default () => {
const [calendar, setCalendar] = useState({
value: dayjs('2017-01-25'),
selectedValue: dayjs('2017-01-25'),
});
const onSelect = value => {
setCalendar({
value,
selectedValue: value,
});
};
const onPanelChange = value => {
setCalendar({
...calendar,
value,
});
};
return (
<>
<Alert
message={`You selected date: ${
calendar.selectedValue && calendar.selectedValue.format('YYYY-MM-DD')
}`}
/>
<Calendar value={calendar.value} onSelect={onSelect} onPanelChange={onPanelChange} />
</>
);
};