以下是一个使用Antd日历组件的代码示例,可以点击日期单元格来切换月份:
import React, { useState } from 'react';
import { Calendar } from 'antd';
const CalendarDemo = () => {
const [date, setDate] = useState(null);
const onDateChange = (date) => {
setDate(date);
};
const onPanelChange = (date, mode) => {
console.log(date, mode);
};
return (
);
}
export default CalendarDemo;
在这个示例中,我们使用了Antd的Calendar
组件,并使用useState
来管理选择的日期。value
属性用于设置当前选中的日期,onChange
回调函数在选择日期时被触发。onPanelChange
回调函数在面板切换(如切换月份)时被触发。
你可以根据需要在onPanelChange
中添加自定义逻辑,比如根据切换后的日期加载对应的数据等。