React MUI MobileDateTimePicker API

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

The MobileDateTimePicker API is part of the Material-UI library for React. It provides a way to select a date and time on mobile devices with an intuitive and user-friendly interface. The API offers various options for customization and integration with other Material-UI components. 

Props List:

• onChange: This is a callback function that is fired when the selected date changes.
• renderInput: This prop allows us to customize the rendered input. This is a function.
• acceptRegex: This is the regular expression that is used to detect "accepted" symbols.
• className: This is the class name that is applied to the root component. The type of this prop is a string.
• closeOnSelect: This is a boolean prop. If this is set to true, the popup or dialog will immediately close after submitting the full date.
• components: These are the overridable components. The type of this prop is an object. The default value is an empty object i.e. {}.
• componentsProps: These are the props used for each component slot. The type of this prop is an object. The default value is an empty object i.e. {}.
• dayOfWeekFormatter:  This is a function that formats the day of the week displayed in the calendar header. The default value of this function is  (day) => day.charAt(0).toUpperCase().
• defaultCalendarMonth: This is used to display the default calendar month when the value is equal to null.
• DialogProps: These are the props that are applied to the dialog component. The type of this prop is any.
• disabled: This is a boolean prop. If the value of this prop is set to true, the picker and text field are disabled. The default value of this prop is false.
• disableFuture: This is a boolean prop. If this is set to true, the future days are disabled. The default value of this prop is false.
• disableHighlightToday: This is a boolean prop. If this is set to true, today's date is rendered without being highlighted with a circle. The default value of this prop is false.
• disableMaskedInput: This is a boolean prop. If this is set to true, this disables the mask on the keyboard. This has to be used rarely. And you have to pass the proper mask for your format. The default value of this prop is false.
• disableOpenPicker: This is a boolean prop. If this is set to true, it does not render the open picker button. The default value of this prop is false.
• disablePast: This is a boolean prop. If this is set to true, the past days are disabled. The default value of this prop is false.
• displayWeekNumber: This is a boolean prop. If this is set to true, the week number will be displayed in the calendar. The default value is false.
• fixedWeekNumber:  The calendars will show more weeks in order to match this value. The type of this prop is a number and the default value is undefined.
• format: This is the format of the date when rendered in the input. The type of this prop is String.
• inputRef: Passes a ref to the input element. The type of this prop is a function.
• label: This is label content. The type of this prop is a node.
• localeText: This is the locale for component texts. This allows overriding texts coming from LocalizationProvider and theme. The type of this prop is an object.
• loading: This is a boolean prop. If this is set to true, it renders LoadingComponent in the calendar view instead of the list view. It can be used to preload information and display that information in a calendar. The default value of this prop is false.
• maxDate: This is the maximally selectable date. You cannot select a date that is greater than the maxDate.
• minDate: This is the minimally selectable date. You cannot select a date that is lesser than the minDate.
• onAccept: This is a callback function that gets fired when the date gets accepted.
• onClose: This is a callback function that gets fired when the popup requests to be closed. It should be used in a controlled mode.
• onError: This is a callback function that gets fired when the input value or new value prop validation returns a new validation error.
• onMonthChange: This is a callback function that gets fired when the month change is detected.
• onOpen: This is a callback function that gets fired when the popup requests to be opened. It should be used in a controlled mode.
• onViewChange: This is a callback function that gets fired when a view change is detected.
• onYearChange: This is a callback function that gets fired when a year change is detected.
• shouldDisableDate: This is a function that is used to disable a specific date.
• shouldDisableMonth: This is a function that is used to disable a specific month.
• shouldDisableYear: This is a function that is used to disable a specific year.
• showDaysOutsideCurrentMonth:  This is a boolean prop. If it is set to true, days that have outsideCurrentMonth={true} get displayed. The default value is false.
• ampm: This is a boolean prop.12h/24h view for hour selection clock. The default value is 12h clock.
• ampmInClock: This is a boolean prop. This is used to display ampm controls under the clock. The default value is false.
• maxDateTime: It is the maximal selectable moment of time binding to the date, to set max time each day use maxTime.
• maxTime: It is the maximum acceptable time.
• minDateTime: It is the minimum selectable moment of time binding to the date, to set min time in each day use minTime.
• minTime: It is the minimum acceptable time.
• minutesStep: Step over minutes.
• shouldDisableTime: This is a function that dynamically checks if time is disabled or not. If it returns a false appropriate time point will not be acceptable.
• timeIcon: Time tab icon.
• autoFocus: This is a boolean prop. If this is set to true, the main element is focused during the first month. The default value of this prop is false.
• monthsPerRow: These are the months rendered per row. The default value of this prop is 3.
• open: This is a boolean prop. This controls the popup or dialog open state. The default value is false.
• openTo: This is the default visible view. It is used when the component view is not controlled. 
• orientation: This prop forces rendering in a particular direction. The type of this prop is landscape or portrait.
• reduceAnimations: This is a boolean prop that disables heavy animations.
• renderLoading : This is a function that displays the component when passed loading as true.
• selectedSections : This displays the currently selected versions.
• slotProps: These are the props that are used for each component slot. The type of this prop is an object. The default value is an empty object i.e. {}.
• slots: These are the overridable component slots. The type of this prop is an object. The default value is an empty object i.e. {}.
• sx: This is the system prop that allows defining system overrides as well as additional CSS styles. This is the array of functions or objects.
• view: This is the visible view. It is used when the component view is controlled.
• viewRenderers: This defines custom view renderers for each section. 
• views: These are the available views.
• yearsPerRow: These are the years rendered per row. The default value of this prop is 3.

Slots List: Here is a list of the available slots in the MobileDateTimePicker component:

• ActionBar: The action bar, which is placed below picker views. The default value is PickersActionBar.
• LeftArrowButton: This is a button that allows you to switch to the left view. The default value is IconButton.
• LeftArrowIcon: This is an icon that appears in the view switch button on the left side. The default value is ArrowLeft.
• OpenPickerIcon: This is an icon that is displayed in the open picker button. The default value is calendar or clock.
• RightArrowButton: This is a button that allows you to switch to the right view.The default value is IconButton.
• RightArrowIcon: This is an icon that is displayed on the right view switch button. The default value is ArrowRight.
• SwitchViewButton: This is a button that is displayed to switch between different calendar views. The default value is IconButton.
• SwitchViewIcon: This is the icon that appears in the SwitchViewButton. The default value is ArrowDropDown.
• Tabs: The tabs enable toggling between date and time pickers. The default value is DateTimePickerTabs.

Syntax: The syntax of MobileDateTimePicker is as follows:

<MobileDateTimePicker
    label="For mobile"
    value={value}
    onChange={(newValue) => {
        setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
/>

Installing React App:

Step 1: Create a React app using the following command.

npx create-react-app mobile-date-time-picker example

Step 2: Now get into the project directory.

cd mobile-date-picker-time-example

Installing Material-UI: Installing Material-UI's source files via npm/yarn, and they take care of injecting CSS needed.

npm install @material-ui/core
Or
yarn add @material-ui/core

Installing the required package:

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/x-date-pickers dayjs

Project Structure: 

Importing MobileDateTimePicker:

import { MobileDateTimePicker } from '@mui/x-date-pickers-pro/MobileDateTimePicker';
OR
import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
OR
import { MobileDateTimePicker } from '@mui/x-date-pickers-pro';
OR
import { MobileDateTimePicker } from '@mui/x-date-pickers';

Step to run the application: 

npm start

Example 1: 

import * as React from 'react';
import dayjs from 'dayjs';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from 
    '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from 
    '@mui/x-date-pickers/DateTimePicker';
import { MobileDateTimePicker } from 
    '@mui/x-date-pickers/MobileDateTimePicker';
import { DesktopDateTimePicker } from
    '@mui/x-date-pickers/DesktopDateTimePicker';
import Stack from '@mui/material/Stack';

export default function ResponsiveDateTimePickers() {
    const [value, setValue] = React
        .useState(dayjs('2023-03-02T00:00:00.000Z'));

    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
            <h3>React MUI MobileDateTimePicker API</h3>
            <Stack spacing={3}>
                <MobileDateTimePicker
                    label="For mobile"
                    value={value}
                    onChange={(newValue) => {
                        setValue(newValue);
                    }}
                    renderInput={(params) => <TextField {...params} />}
                />

            </Stack>
        </LocalizationProvider>
    );
}

Output: 

Example 2: We will see the ways to restrict date and time selection. There are two ways to do this:

1. By using minDateTime or maxDateTime, it is possible to restrict the time selection to before or after a particular moment of time.
2. By using minTime or maxTime, you can disable selecting times before or after a certain time each day respectively.

• File name: App.js

import * as React from 'react';
import dayjs from 'dayjs';
import TextField from '@mui/material/TextField';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from 
    '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import Stack from '@mui/material/Stack';

export default function DateTimeValidation() {
    const [value, setValue] = React.useState(dayjs('2023-03-02'));

    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <h1 style={{ color: 'green' }}>GeeksForGeeks</h1>
            <h3>React MUI MobileDateTimePicker API</h3>
            <Stack spacing={3}>
                <DateTimePicker
                    renderInput={(params) => <TextField {...params} />}
                    label="Ignore date and time"
                    value={value}
                    onChange={(newValue) => {
                        setValue(newValue);
                    }}
                    minDateTime={dayjs('2023-03-02T12:00')}
                />
                <DateTimePicker
                    renderInput={(params) => <TextField {...params} />}
                    label="Ignore time in each day"
                    value={value}
                    onChange={(newValue) => {
                        setValue(newValue);
                    }}
                    minDate={dayjs('2023-02-02')}
                    minTime={dayjs('2022-02-03T08:00')}
                    maxTime={dayjs('2022-02-03T18:45')}
                />
            </Stack>
        </LocalizationProvider>
    );
}

Output: 

Reference: https://mui.com/x/api/date-pickers/mobile-date-time-picker/