---
order: 3
title:
zh-CN: 选择功能
en-US: Selectable Calendar
---
## zh-CN
一个通用的日历面板,支持年/月切换。
## en-US
A basic calendar component with Year/Month switch.
```tsx
import { Alert, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import React, { useState } from 'react';
const App: React.FC = () => {
const [value, setValue] = useState(dayjs('2017-01-25'));
const [selectedValue, setSelectedValue] = useState(dayjs('2017-01-25'));
const onSelect = (newValue: Dayjs) => {
setValue(newValue);
setSelectedValue(newValue);
};
const onPanelChange = (newValue: Dayjs) => {
setValue(newValue);
};
return (
<>
>
);
};
export default App;
```