mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
982871522b
* added new calendar api, renderHeader now we can customize calendar header * fixed typo for tests * error handling for renderHeader * covering all cases with tests * fixed tests and change console error to warning * fixed feedbacks and code optimization * cleanup callback function arguments * removed unused changes * fixed tests * added extra classes * fixed some comments * tying to fix test for remote * tying to fix test for remote in my local machin it works fine * tying to fix test for remote in my local machin it works fine * tying to fix test for remote in my local machin it works fine * updated test snapshots * fixed comment * fixed linting * fixed some texts * added header for CN and added argument types * removed extra row
2.5 KiB
2.5 KiB
| category | type | cols | title |
|---|---|---|---|
| Components | Data Display | 1 | Calendar |
Container for displaying data in calendar form.
When To Use
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
API
Note: Part of the Calendar's locale is read from value. So, please set the locale of moment correctly.
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
<Calendar
dateCellRender={dateCellRender}
monthCellRender={monthCellRender}
onPanelChange={onPanelChange}
onSelect={onSelect}
/>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - | |
| defaultValue | The date selected by default | moment | default date | |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | |
| fullscreen | Whether to display in full-screen | boolean | true |
|
| locale | The calendar's locale | object | default | |
| mode | The display mode of the calendar | month | year |
month |
|
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - | |
| validRange | to set valid range | [moment, moment] | - | |
| value | The current selected date | moment | current date | |
| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - | |
| onSelect | Callback for when a date is selected | function(date: moment） | - | |
| onChange | Callback for when date changes | function(date: moment） | - | |
| headerRender | render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | 3.19.0 |