date-pickers-modern v7.7.1-alpha.1
date-pickers-modern
This package is date and time picker components.
Installation
Install the package in your project directory with:
npm install date-pickers-modern
Usage
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateRangePicker
localeText={{ start: 'Check-in', end: 'Check-out' }}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
Props
Name | Type | Default | Description | ||
---|---|---|---|---|---|
autoFocus | bool | - | If true, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the day view). - the input element if there is a field rendered. | ||
availableRangePositions | Array<'end' | 'start'> | 'start', 'end' | Range positions available for selection. This list is checked against when checking if a next range position can be selected.Used on Date Time Range pickers with current rangePosition to force a finish selection after just one range position selection. | ||
calendars | 1 | 2 | 3 | 2 | The number of calendars to render. | ||
classes | object | - | Override or extend the styles applied to the component.See CSS classes API below for more details. | ||
currentMonthCalendarPosition | 1 | 2 | 3 | 1 | Position the current month is rendered in. | ||
dayOfWeekFormatter | func | (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase() | Formats the day of week displayed in the calendar header.Signature:function(date: TDate) => stringdate The date of the day of week provided by the adapter.Returns: The name to display. | ||
defaultRangePosition | 'end' | 'start' | 'start' | The initial position in the edited date range. Used when the component is not controlled. | ||
defaultValue | Array<object> | - | The default selected value. Used when the component is not controlled. | ||
disableAutoMonthSwitching | bool | false | If true, after selecting start date calendar will not automatically switch to the month of end date. | ||
disabled | bool | false | If true, the picker and text field are disabled. | ||
disableDragEditing | bool | false | If true, editing dates by dragging is disabled. | ||
disableFuture | bool | false | If true, disable values after the current date for date components, time for time components and both for date time components. | ||
disableHighlightToday | bool | false | If true, today's date is rendering without highlighting with circle. | ||
disablePast | bool | false | If true, disable values before the current date for date components, time for time components and both for date time components. | ||
displayWeekNumber | bool | - | If true, the week number will be display in the calendar. | ||
fixedWeekNumber | number | - | The day view will show as many weeks as needed after the end of the current month to match this value. Put it to 6 to have a fixed number of weeks in Gregorian calendars | ||
focusedView | 'day' | - | Controlled focused view. | ||
loading | bool | false | If true, calls renderLoading instead of rendering the day calendar. Can be used to preload information and show it in calendar. | ||
maxDate | object | - | Maximal selectable date. | ||
minDate | object | - | Minimal selectable date. | ||
onChange | func | - | Callback fired when the value changes.Signature:function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => voidvalue The new value.selectionState Indicates if the date selection is complete.selectedView Indicates the view in which the selection has been made. |
onFocusedViewChange | func | - | Callback fired on focused view change.Signature:function(view: TView, hasFocus: boolean) => voidview The new view to focus or not.hasFocus true if the view should be focused. | ||
onMonthChange | func | - | Callback fired on month change.Signature:function(month: TDate) => voidmonth The new month. | ||
onRangePositionChange | func | - | Callback fired when the range position changes.Signature:function(rangePosition: RangePosition) => voidrangePosition The new range position. | ||
onViewChange | func | - | Callback fired on view change.Signature:function(view: TView) => voidview The new view. | ||
openTo | 'day' | - | The default visible view. Used when the component view is not controlled. Must be a valid option from views list. | ||
rangePosition | 'end' | 'start' | - | The position in the currently edited date range. Used when the component position is controlled. | ||
readOnly | bool | false | Make picker read only. | ||
reduceAnimations | bool | @media(prefers-reduced-motion: reduce) || navigator.userAgent matches Android <10 or iOS <13 | If true, disable heavy animations. | ||
referenceDate | object | The closest valid date using the validation props, except callbacks such as shouldDisableDate . | The date used to generate the new value when both value and defaultValue are empty. | ||
renderLoading | func | () => "..." | Component rendered on the "day" view when props.loading is true.Signature:function() => React.ReactNodeReturns: The node to render when loading. | ||
shouldDisableDate | func | - | Disable specific date.Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.Signature:function(day: TDate, position: string) => booleanday The date to test.position The date to test, 'start' or 'end'.Returns: Returns true if the date should be disabled. | ||
showDaysOutsideCurrentMonth | bool | false | If true, days outside the current month are rendered:- if fixedWeekNumber is defined, renders days to have the weeks requested.- if fixedWeekNumber is not defined, renders day to fill the first and last week of the current month.- ignored if calendars equals more than 1 on range pickers. | ||
slotProps | object | {} | The props used for each component slot. | ||
slots | object | {} | Overridable component slots.See Slots API below for more details. | ||
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. | ||
timezone | string | The timezone of the value or defaultValue prop is defined, 'default' otherwise. | Choose which timezone to use for the value. Example: "default", "system", "UTC", "America/New_York". If you pass values from other timezones to some props, they will be converted to this timezone before being used.See the timezones documentation for more details. | ||
value | Array<object> | - | The selected value. Used when the component is controlled. | ||
view | 'day' | - | The visible view. Used when the component view is controlled. Must be a valid option from views list. | ||
views | Array<'day'> | - | Available views. |
The ref
is forwarded to the root element.
Slots
Slot name | Class name | Default component | Description |
---|---|---|---|
calendarHeader | PickersCalendarHeader | Custom component for calendar header. Check the PickersCalendarHeader component. | |
day | DateRangePickersDay | Custom component for day in range pickers. Check the DateRangePickersDay component. | |
previousIconButton | IconButton | Button allowing to switch to the left view. | |
nextIconButton | IconButton | Button allowing to switch to the right view. | |
leftArrowIcon | ArrowLeft | Icon displayed in the left view switch button. | |
rightArrowIcon | ArrowRight | Icon displayed in the right view switch button. | |
switchViewButton | IconButton | Button displayed to switch between different calendar views. | |
switchViewIcon | ArrowDropDown | Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'. |
CSS
Class name | Rule name | Description |
---|---|---|
.MuiDateRangeCalendar-dayDragging | dayDragging | Styles applied to the day calendar container when dragging |
.MuiDateRangeCalendar-monthContainer | monthContainer | Styles applied to the container of a month. |
.MuiDateRangeCalendar-root | root | Styles applied to the root element. |
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago