2023-04-03 11:21:24 +08:00
|
|
|
import React from 'react';
|
2024-04-01 15:49:45 +08:00
|
|
|
import type { DatePickerProps } from 'antd';
|
2023-09-15 12:23:57 +08:00
|
|
|
import { DatePicker, Space, theme } from 'antd';
|
|
|
|
import type { Dayjs } from 'dayjs';
|
2022-11-09 12:28:04 +08:00
|
|
|
|
2023-09-15 12:23:57 +08:00
|
|
|
const App: React.FC = () => {
|
|
|
|
const { token } = theme.useToken();
|
|
|
|
const style: React.CSSProperties = {
|
|
|
|
border: `1px solid ${token.colorPrimary}`,
|
|
|
|
borderRadius: '50%',
|
|
|
|
};
|
2024-04-01 15:49:45 +08:00
|
|
|
const cellRender: DatePickerProps<Dayjs>['cellRender'] = (current, info) => {
|
2023-09-15 12:23:57 +08:00
|
|
|
if (info.type !== 'date') {
|
|
|
|
return info.originNode;
|
|
|
|
}
|
2024-04-01 15:49:45 +08:00
|
|
|
if (typeof current === 'number' || typeof current === 'string') {
|
2023-09-15 12:23:57 +08:00
|
|
|
return <div className="ant-picker-cell-inner">{current}</div>;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="ant-picker-cell-inner" style={current.date() === 1 ? style : {}}>
|
|
|
|
{current.date()}
|
|
|
|
</div>
|
|
|
|
);
|
2024-04-01 15:49:45 +08:00
|
|
|
};
|
2023-09-15 12:23:57 +08:00
|
|
|
return (
|
|
|
|
<Space size={12} direction="vertical">
|
|
|
|
<DatePicker cellRender={cellRender} />
|
|
|
|
<DatePicker.RangePicker cellRender={cellRender} />
|
|
|
|
</Space>
|
|
|
|
);
|
|
|
|
};
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
|
|
export default App;
|