CalendarPicker API
Documentação da API para o componente React CalendarPicker . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import CalendarPicker from '@mui/lab/CalendarPicker';
// ou
import { CalendarPicker } from '@mui/lab';Nome do componente
The nameMuiCalendarPicker can be used when providing default props or style overrides in the theme.Propriedades
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| 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. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiCalendarPicker-root | Estilos aplicados ao elemento raiz. |
| viewTransitionContainer | .MuiCalendarPicker-viewTransitionContainer | Estilos aplicados a the transition group element. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverridesdo componente em um tema personalizado.