跳转到内容

DateRangePickerDay API

API documentation for the React DateRangePickerDay component. Learn about the available props, and the CSS API.

Import

import DateRangePickerDay from '@material-ui/lab/DateRangePickerDay';
// 或
import { DateRangePickerDay } from '@material-ui/lab';
You can learn about the difference by reading this guide on minimizing bundle size.

Component name

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

属性

名称类型默认值描述
classes*object
day*anyThe date to show.
isEndOfHighlighting*boolfalse
isEndOfPreviewing*boolfalse
isHighlighting*boolfalse
isPreviewing*boolfalse
isStartOfHighlighting*boolfalse
isStartOfPreviewing*boolfalse
outsideCurrentMonth*boolfalseIf true, day is outside of month and will be hidden.
childrennodeThe content of the component.
selectedboolfalseIf true, renders as selected.

ref 则会被传递到根元素中。

CSS

Rule nameGlobal class描述
root.MuiDateRangePickerDay-root
dayWithMargin.MuiDateRangePickerDay-dayWithMargin
dayOutsideMonth.MuiDateRangePickerDay-dayOutsideMonth
hiddenDaySpacingFiller.MuiDateRangePickerDay-hiddenDaySpacingFiller
today.MuiDateRangePickerDay-today
selected.Mui-selected
disabled.Mui-disabled
day.MuiDateRangePickerDay-day
rangeIntervalDayHighlight.MuiDateRangePickerDay-rangeIntervalDayHighlight
rangeIntervalDayHighlightStart.MuiDateRangePickerDay-rangeIntervalDayHighlightStart
rangeIntervalDayHighlightEnd.MuiDateRangePickerDay-rangeIntervalDayHighlightEnd
dayOutsideRangeInterval.MuiDateRangePickerDay-dayOutsideRangeInterval
dayInsideRangeInterval.MuiDateRangePickerDay-dayInsideRangeInterval
notSelectedDate.MuiDateRangePickerDay-notSelectedDate
rangeIntervalPreview.MuiDateRangePickerDay-rangeIntervalPreview
rangeIntervalDayPreview.MuiDateRangePickerDay-rangeIntervalDayPreview
rangeIntervalDayPreviewStart.MuiDateRangePickerDay-rangeIntervalDayPreviewStart
rangeIntervalDayPreviewEnd.MuiDateRangePickerDay-rangeIntervalDayPreviewEnd

You can override the style of the component using one of these customization options: If that isn't sufficient, you can check the implementation of the component for more detail.

Demos