date-pickers-modern

This package is date and time picker components.

Installation

Install the package in your project directory with:

``sh
npm install date-pickers-modern
`

Usage

`sh

localeText={{ start: 'Check-in', end: 'Check-out' }}
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (


to


)}
/>

`

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