antd calendar日历组件去掉选择的日期的背景颜色
时间: 2024-02-12 22:05:13 浏览: 232
react-rdatepicker基于react的日历选择组件支持单选多选
您可以通过在 `antd calendar` 组件中设置 `selected` 属性来实现去掉选择的日期的背景颜色。具体来说,您可以将 `selected` 属性设置为一个空数组 `[]`,这样选择的日期就不会有背景颜色了。以下是一个示例代码:
```jsx
import { Calendar } from 'antd';
function MyCalendar() {
return <Calendar selected={[]} />;
}
```
在上面的示例代码中,`<Calendar selected={[]} />` 会显示一个没有选择日期背景颜色的日历。如果您希望通过代码来控制选中日期的背景颜色,可以使用 `dateCellRender` 属性来设置。例如:
```jsx
import { useState } from 'react';
import { Calendar } from 'antd';
function MyCalendar() {
const [selectedDate, setSelectedDate] = useState(undefined);
function handleSelectDate(date) {
setSelectedDate(date);
}
function renderDateCell(date) {
const isSelected = date.isSame(selectedDate, 'day');
const backgroundColor = isSelected ? '#1890ff' : undefined;
return (
<div style={{ backgroundColor }}>
{date.date()}
</div>
);
}
return (
<Calendar
dateCellRender={renderDateCell}
onSelect={handleSelectDate}
/>
);
}
```
在上面的示例代码中,`<Calendar dateCellRender={renderDateCell} onSelect={handleSelectDate} />` 会根据 `selectedDate` 变量来控制选择日期的背景颜色。`renderDateCell` 函数会根据日期是否被选中来设置背景颜色,如果未选中,则不设置背景颜色。当用户选择一个日期时,会调用 `handleSelectDate` 函数来更新 `selectedDate` 变量的值。
阅读全文