ant-design/components/date-picker/demo/cell-render.tsx
Amumu bf9eff66d7
chore: merge feature into master (#41598)
* 🦄️ refactor(DatePicker,Calendar): dateRender,monthRender => cellRender (#41584)

* refactor: dateRender => cellRender

* feat: update snapshots

* feat: update snapshots

* docs: update docs

* docs: update docs

* docs: update docs

* docs: update docs

* feat: update test case

* docs: update docs

* feat: optimize code

* feat: optimize code

* feat: update test case

* feat: update test case

* test: fix lint error (#41596) (#41600)

* test: fix lint error

* chore: fix lint

---------

* feat: Picker luxon support (#41580)

* chore: add luxon english documentation

* chore: add draft chinese documentation

This documentation was auto-generated based on the english version so it is only a rough draft and will most likely need to be refined.

* fix: improve documentation phrasing

---------

Co-authored-by: kiner-tang(文辉) <1127031143@qq.com>
Co-authored-by: Sylvain Boulade <sboulade@gmail.com>
2023-04-03 11:21:24 +08:00

40 lines
974 B
TypeScript

import { DatePicker, Space } from 'antd';
import React from 'react';
const { RangePicker } = DatePicker;
const App: React.FC = () => (
<Space direction="vertical" size={12}>
<DatePicker
cellRender={(current) => {
const style: React.CSSProperties = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return (
<div className="ant-picker-cell-inner" style={style}>
{current.date()}
</div>
);
}}
/>
<RangePicker
cellRender={(current) => {
const style: React.CSSProperties = {};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return (
<div className="ant-picker-cell-inner" style={style}>
{current.date()}
</div>
);
}}
/>
</Space>
);
export default App;