import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; const _excluded = ["desktopModeMediaQuery", "DialogProps", "PopperProps", "TransitionComponent"]; import * as React from 'react'; import PropTypes from 'prop-types'; import { useThemeProps } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import { DesktopDateTimePicker } from '../DesktopDateTimePicker'; import { MobileDateTimePicker } from '../MobileDateTimePicker'; import { jsx as _jsx } from "react/jsx-runtime"; /** * * Demos: * * - [Date Time Picker](https://mui.com/x/react-date-pickers/date-time-picker/) * - [Pickers](https://mui.com/x/react-date-pickers/) * * API: * * - [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/) */ export const DateTimePicker = /*#__PURE__*/React.forwardRef(function DateTimePicker(inProps, ref) { const props = useThemeProps({ props: inProps, name: 'MuiDateTimePicker' }); const { desktopModeMediaQuery = '@media (pointer: fine)', DialogProps, PopperProps, TransitionComponent } = props, other = _objectWithoutPropertiesLoose(props, _excluded); // defaults to `true` in environments where `window.matchMedia` would not be available (i.e. test/jsdom) const isDesktop = useMediaQuery(desktopModeMediaQuery, { defaultMatches: true }); if (isDesktop) { return /*#__PURE__*/_jsx(DesktopDateTimePicker, _extends({ ref: ref, PopperProps: PopperProps, TransitionComponent: TransitionComponent }, other)); } return /*#__PURE__*/_jsx(MobileDateTimePicker, _extends({ ref: ref, DialogProps: DialogProps }, other)); }); process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** * Regular expression to detect "accepted" symbols. * @default /\dap/gi */ acceptRegex: PropTypes.instanceOf(RegExp), /** * 12h/24h view for hour selection clock. * @default `utils.is12HourCycleInCurrentLocale()` */ ampm: PropTypes.bool, /** * Display ampm controls under the clock (instead of in the toolbar). * @default false */ ampmInClock: PropTypes.bool, autoFocus: PropTypes.bool, children: PropTypes.node, /** * className applied to the root component. */ className: PropTypes.string, /** * If `true` the popup or dialog will immediately close after submitting full date. * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop). */ closeOnSelect: PropTypes.bool, /** * Overrideable components. * @default {} */ components: PropTypes.object, /** * The props used for each component slot. * @default {} */ componentsProps: PropTypes.object, /** * Date tab icon. */ dateRangeIcon: PropTypes.node, /** * Formats the day of week displayed in the calendar header. * @param {string} day The day of week provided by the adapter's method `getWeekdays`. * @returns {string} The name to display. * @default (day) => day.charAt(0).toUpperCase() */ dayOfWeekFormatter: PropTypes.func, /** * Default calendar month displayed when `value={null}`. */ defaultCalendarMonth: PropTypes.any, /** * CSS media query when `Mobile` mode will be changed to `Desktop`. * @default '@media (pointer: fine)' * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm") */ desktopModeMediaQuery: PropTypes.string, /** * Props applied to the [`Dialog`](https://mui.com/material-ui/api/dialog/) element. */ DialogProps: PropTypes.object, /** * If `true`, the picker and text field are disabled. * @default false */ disabled: PropTypes.bool, /** * If `true` future days are disabled. * @default false */ disableFuture: PropTypes.bool, /** * If `true`, today's date is rendering without highlighting with circle. * @default false */ disableHighlightToday: PropTypes.bool, /** * Do not ignore date part when validating min/max time. * @default false */ disableIgnoringDatePartForTimeValidation: PropTypes.bool, /** * Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format. * @default false */ disableMaskedInput: PropTypes.bool, /** * Do not render open picker button (renders only text field with validation). * @default false */ disableOpenPicker: PropTypes.bool, /** * If `true` past days are disabled. * @default false */ disablePast: PropTypes.bool, /** * Accessible text that helps user to understand which time and view is selected. * @template TDate * @param {ClockPickerView} view The current view rendered. * @param {TDate | null} time The current time. * @param {MuiPickersAdapter} adapter The current date adapter. * @returns {string} The clock label. * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/. * @default ( * view: ClockView, * time: TDate | null, * adapter: MuiPickersAdapter, * ) => * `Select ${view}. ${ * time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}` * }` */ getClockLabelText: PropTypes.func, /** * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType * @template TInputDate, TDate * @param {TInputDate} date The date from which we want to add an aria-text. * @param {MuiPickersAdapter} utils The utils to manipulate the date. * @returns {string} The aria-text to render inside the dialog. * @default (date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}` */ getOpenDialogAriaText: PropTypes.func, /** * Get aria-label text for switching between views button. * @param {CalendarPickerView} currentView The view from which we want to get the button text. * @returns {string} The label of the view. * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/. */ getViewSwitchingButtonText: PropTypes.func, /** * Toggles visibility of date time switching tabs * @default false for mobile, true for desktop */ hideTabs: PropTypes.bool, ignoreInvalidInputs: PropTypes.bool, /** * Props to pass to keyboard input adornment. */ InputAdornmentProps: PropTypes.object, /** * Format string. */ inputFormat: PropTypes.string, InputProps: PropTypes.object, /** * Pass a ref to the `input` element. */ inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.object })]), label: PropTypes.node, /** * Left arrow icon aria-label text. * @deprecated */ leftArrowButtonText: PropTypes.string, /** * If `true` renders `LoadingComponent` in calendar instead of calendar view. * Can be used to preload information and show it in calendar. * @default false */ loading: PropTypes.bool, /** * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`). */ mask: PropTypes.string, /** * Maximal selectable date. @DateIOType */ maxDate: PropTypes.any, /** * Maximal selectable moment of time with binding to date, to set max time in each day use `maxTime`. */ maxDateTime: PropTypes.any, /** * Max time acceptable time. * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified. */ maxTime: PropTypes.any, /** * Minimal selectable date. @DateIOType */ minDate: PropTypes.any, /** * Minimal selectable moment of time with binding to date, to set min time in each day use `minTime`. */ minDateTime: PropTypes.any, /** * Min time acceptable time. * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified. */ minTime: PropTypes.any, /** * Step over minutes. * @default 1 */ minutesStep: PropTypes.number, /** * Callback fired when date is accepted @DateIOType. * @template TValue * @param {TValue} value The value that was just accepted. */ onAccept: PropTypes.func, /** * Callback fired when the value (the selected date) changes @DateIOType. * @template TValue * @param {TValue} value The new parsed value. * @param {string} keyboardInputValue The current value of the keyboard input. */ onChange: PropTypes.func.isRequired, /** * Callback fired when the popup requests to be closed. * Use in controlled mode (see open). */ onClose: PropTypes.func, /** * Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error). * In case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state. * This can be used to render appropriate form error. * * [Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying. * @DateIOType * * @template TError, TInputValue * @param {TError} reason The reason why the current value is not valid. * @param {TInputValue} value The invalid value. */ onError: PropTypes.func, /** * Callback firing on month change @DateIOType. * @template TDate * @param {TDate} month The new month. * @returns {void|Promise} - */ onMonthChange: PropTypes.func, /** * Callback fired when the popup requests to be opened. * Use in controlled mode (see open). */ onOpen: PropTypes.func, /** * Callback fired on view change. * @param {CalendarOrClockPickerView} view The new view. */ onViewChange: PropTypes.func, /** * Callback firing on year change @DateIOType. * @template TDate * @param {TDate} year The new year. */ onYearChange: PropTypes.func, /** * Control the popup or dialog open state. */ open: PropTypes.bool, /** * Props to pass to keyboard adornment button. */ OpenPickerButtonProps: PropTypes.object, /** * First view to show. * Must be a valid option from `views` list * @default 'day' */ openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']), /** * Force rendering in particular orientation. */ orientation: PropTypes.oneOf(['landscape', 'portrait']), /** * Paper props passed down to [Paper](https://mui.com/material-ui/api/paper/) component. */ PaperProps: PropTypes.object, /** * Popper props passed down to [Popper](https://mui.com/material-ui/api/popper/) component. */ PopperProps: PropTypes.object, /** * Make picker read only. * @default false */ readOnly: PropTypes.bool, /** * Disable heavy animations. * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent) */ reduceAnimations: PropTypes.bool, /** * Custom renderer for day. Check the [PickersDay](https://mui.com/x/api/date-pickers/pickers-day/) component. * @template TDate * @param {TDate} day The day to render. * @param {Array} selectedDays The days currently selected. * @param {PickersDayProps} pickersDayProps The props of the day to render. * @returns {JSX.Element} The element representing the day. */ renderDay: PropTypes.func, /** * The `renderInput` prop allows you to customize the rendered input. * The `props` argument of this render prop contains props of [TextField](https://mui.com/material-ui/api/text-field/#props) that you need to forward. * Pay specific attention to the `ref` and `inputProps` keys. * @example ```jsx * renderInput={props => } * ```` * @param {MuiTextFieldPropsType} props The props of the input. * @returns {React.ReactNode} The node to render as the input. */ renderInput: PropTypes.func.isRequired, /** * Component displaying when passed `loading` true. * @returns {React.ReactNode} The node to render when loading. * @default () => ... */ renderLoading: PropTypes.func, /** * Custom formatter to be passed into Rifm component. * @param {string} str The un-formatted string. * @returns {string} The formatted string. */ rifmFormatter: PropTypes.func, /** * Right arrow icon aria-label text. * @deprecated */ rightArrowButtonText: PropTypes.string, /** * Disable specific date. @DateIOType * @template TDate * @param {TDate} day The date to test. * @returns {boolean} Returns `true` if the date should be disabled. */ shouldDisableDate: PropTypes.func, /** * Disable specific months dynamically. * Works like `shouldDisableDate` but for month selection view @DateIOType. * @template TDate * @param {TDate} month The month to check. * @returns {boolean} If `true` the month will be disabled. */ shouldDisableMonth: PropTypes.func, /** * Dynamically check if time is disabled or not. * If returns `false` appropriate time point will ot be acceptable. * @param {number} timeValue The value to check. * @param {ClockPickerView} clockType The clock type of the timeValue. * @returns {boolean} Returns `true` if the time should be disabled */ shouldDisableTime: PropTypes.func, /** * Disable specific years dynamically. * Works like `shouldDisableDate` but for year selection view @DateIOType. * @template TDate * @param {TDate} year The year to test. * @returns {boolean} Returns `true` if the year should be disabled. */ shouldDisableYear: PropTypes.func, /** * If `true`, days that have `outsideCurrentMonth={true}` are displayed. * @default false */ showDaysOutsideCurrentMonth: PropTypes.bool, /** * If `true`, show the toolbar even in desktop mode. */ showToolbar: PropTypes.bool, /** * Time tab icon. */ timeIcon: PropTypes.node, /** * Component that will replace default toolbar renderer. * @default DateTimePickerToolbar */ ToolbarComponent: PropTypes.elementType, /** * Date format, that is displaying in toolbar. */ toolbarFormat: PropTypes.string, /** * Mobile picker date value placeholder, displaying if `value` === `null`. * @default '–' */ toolbarPlaceholder: PropTypes.node, /** * Mobile picker title, displaying in the toolbar. * @default 'Select date & time' */ toolbarTitle: PropTypes.node, /** * Custom component for popper [Transition](https://mui.com/material-ui/transitions/#transitioncomponent-prop). */ TransitionComponent: PropTypes.elementType, /** * The value of the picker. */ value: PropTypes.any, /** * Array of views to show. * @default ['year', 'day', 'hours', 'minutes'] */ views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired) } : void 0;