DateRangePickerDay API

Documentação da API para o componente React DateRangePickerDay . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import DateRangePickerDay from '@mui/lab/DateRangePickerDay';
// ou
import { DateRangePickerDay } from '@mui/lab';

Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiDateRangePickerDay can be used when providing default props or style overrides in the theme.

Propriedades

Nome	Tipo	Padrão	Descrição
day^*	any		The date to show.
isEndOfHighlighting^*	bool	false	Set to `true` if the `day` is the end of a highlighted date range.
isEndOfPreviewing^*	bool	false	Set to `true` if the `day` is the start of a highlighted date range.
isHighlighting^*	bool	false	Set to `true` if the `day` is in a highlighted date range.
isPreviewing^*	bool	false	Set to `true` if the `day` is in a preview date range.
isStartOfHighlighting^*	bool	false	Set to `true` if the `day` is the start of a highlighted date range.
isStartOfPreviewing^*	bool	false	Set to `true` if the `day` is the end of a highlighted date range.
outsideCurrentMonth^*	bool	false	If `true`, day is outside of month and will be hidden.
children	node		O conteúdo do componente.
classes	object		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
selected	bool	false	If `true`, renders as selected.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regra	Classe global	Descrição
root	.MuiDateRangePickerDay-root	Estilos aplicados ao elemento raiz.
rangeIntervalDayHighlight	.MuiDateRangePickerDay-rangeIntervalDayHighlight	Estilos aplicados para o elemento raiz se `isHighlighting=true` and `outsideCurrentMonth=false`.
rangeIntervalDayHighlightStart	.MuiDateRangePickerDay-rangeIntervalDayHighlightStart	Estilos aplicados para o elemento raiz se `isStartOfHighlighting=true` or `day` is the start of the month.
rangeIntervalDayHighlightEnd	.MuiDateRangePickerDay-rangeIntervalDayHighlightEnd	Estilos aplicados para o elemento raiz se `isEndOfHighlighting=true` or `day` is the end of the month.
rangeIntervalPreview	.MuiDateRangePickerDay-rangeIntervalPreview	Estilos aplicados a the preview element.
rangeIntervalDayPreview	.MuiDateRangePickerDay-rangeIntervalDayPreview	Estilos aplicados para o elemento raiz se `isPreviewing=true` and `outsideCurrentMonth=false`.
rangeIntervalDayPreviewStart	.MuiDateRangePickerDay-rangeIntervalDayPreviewStart	Estilos aplicados para o elemento raiz se `isStartOfPreviewing=true` or `day` is the start of the month.
rangeIntervalDayPreviewEnd	.MuiDateRangePickerDay-rangeIntervalDayPreviewEnd	Estilos aplicados para o elemento raiz se `isEndOfPreviewing=true` or `day` is the end of the month.
day	.MuiDateRangePickerDay-day	Estilos aplicados a the day element.
dayOutsideRangeInterval	.MuiDateRangePickerDay-dayOutsideRangeInterval	Estilos aplicados para the day element se `isHighlighting=false`.
dayInsideRangeInterval	.MuiDateRangePickerDay-dayInsideRangeInterval	Estilos aplicados para the day element se `selected=false` and `isHighlighting=true`.
notSelectedDate	.MuiDateRangePickerDay-notSelectedDate	Estilos aplicados para the day element se `selected=false`.

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 styleOverrides do componente em um tema personalizado.

Demonstrações

Date Range Picker