CalendarPicker API
想要学习更多组件属性和 CSS API,可以查阅 React CalendarPicker 组件的 API 文档。
导入
import CalendarPicker from '@mui/lab/CalendarPicker';
// 或
import { CalendarPicker } from '@mui/lab';组件名称
The nameMuiCalendarPicker can be used when providing default props or style overrides in the theme.属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| onChange* | func | Callback fired on date change | |
| defaultCalendarMonth | any | Default calendar month displayed when value={null}. | |
| disabled | bool | false | If true, the picker and text field are disabled. |
| loading | bool | false | If true renders LoadingComponent in calendar instead of calendar view. Can be used to preload information and show it in calendar. |
| maxDate | any | Max selectable date. @DateIOType | |
| minDate | any | Min selectable date. @DateIOType | |
| onMonthChange | func | Callback firing on month change. @DateIOType | |
| onViewChange | func | Callback fired on view change. | |
| openTo | 'day' | 'month' | 'year' | 'day' | Initially open view. |
| readOnly | bool | false | Make picker read only. |
| reduceAnimations | bool | typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) | Disable heavy animations. |
| renderLoading | func | () => <span data-mui-test="loading-progress">...</span> | Component displaying when passed loading true. |
| shouldDisableDate | func | Disable specific date. @DateIOType | |
| shouldDisableYear | func | Disable specific years dynamically. Works like shouldDisableDate but for year selection view @DateIOType. | |
| view | 'day' | 'month' | 'year' | Controlled open view. | |
| views | Array<'day' | 'month' | 'year'> | ['year', 'day'] | Views for calendar picker. |
ref 则会被传递到根元素中。CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| root | .MuiCalendarPicker-root | Styles applied to the root element. |
| viewTransitionContainer | .MuiCalendarPicker-viewTransitionContainer | Styles applied to the transition group element. |
您可以使用组件自定义选项对组件进行个性化:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.