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 | 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. |