给Ant degin中Calendar渲染当前月份日期标记
时间: 2024-03-27 17:38:03 浏览: 65
在 Ant Design 中,可以使用 `Calendar` 组件来渲染日历。要标记当前月份的日期,可以使用 `dateCellRender` 属性,该属性可以接受一个函数,用于自定义日期单元格的渲染方式。具体实现代码如下:
```jsx
import { Calendar } from 'antd';
function dateCellRender(date) {
const currentMonth = date.month();
const isCurrentMonth = currentMonth === moment().month();
return isCurrentMonth ? <div className="current-month-date">{date.date()}</div> : null;
}
function App() {
return (
<Calendar dateCellRender={dateCellRender} />
);
}
```
在上面的代码中,我们定义了一个名为 `dateCellRender` 的函数,该函数接受一个 moment.js 对象 `date` 作为参数,用于渲染日期单元格。在函数中,我们首先获取当前月份的数字,然后判断当前单元格的月份是否和当前月份相同,如果相同,则渲染日期数字并添加一个自定义样式 `current-month-date`;否则不渲染。
最后,在 `Calendar` 组件中,我们将 `dateCellRender` 函数作为 `dateCellRender` 属性的值传入,即可实现标记当前月份日期的效果。
阅读全文