React MUI MobileDatePicker API

Last Updated : 14 Mar, 2023

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI MobileDatePicker API. The MobileDatePicker helps to provide an interface for the user to select or mark a date.

Import Statement:

import { MobileDatePicker } from '@mui/x-date-pickers-pro/MobileDatePicker';
// or
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
// or
import { MobileDatePicker } from '@mui/x-date-pickers-pro';
// or
import { MobileDatePicker } from '@mui/x-date-pickers';

MobileDatePicker API Props:

onChange: It is a void callback function that gets triggered whenever the value gets changed.
renderInput: It helps you to render the other component for the display, in this case, it is textarea.
acceptRegex: It defines the accepted characters.
className: It applies to the root for style and default behavior.
closeOnSelect: It is a boolean value. It determines whether the popup or dialog should immediately close after submitting the date or not. It is false by default.
components: The component used for the root node.
componentsProps: It denotes the props used for each component slot.
dayOfWeekFormatter: A function to format the display of days.
defaultCalendarMonth: It sets a default month for the calendar.
DialogProps: It denotes the props applied to the Dialog element.
disabled: It is a boolean value. It determines whether the label and the picker should be displayed in a disabled state or not. It is false by default.
disableFuture: It is a boolean value. It determines whether the future dates will be in a disabled state or not. It is false by default.
disableHighlightToday: It is a boolean value. It determines whether the present date should be highlighted or not. It is false by default.
disableMaskedInput: It is a boolean value. It determines whether to disable mask input through a keyboard or not. It is false by default.
disableOpenPicker: It is a boolean value. It determines whether to disable the picker or not. It is false by default.
disablePast: It is a boolean value. It determines whether to disable the past days or not. It is false by default.
getOpenDialogAriaText: It is a function that determines from which date we want o add to aria-text.
getViewSwitchingButtonText: Function that changes the label for switching between views button.
InputAdornmentProps: It refers to the props to pass to keyboard input adornment.
inputFormat: It formats the input string.
inputRef: It passes a ref to the input element.
leftArrowButtonText: It shows the left arrow icon.
loading: It is a boolean value. It determines whether to show the loading state or not. It is false by default.
mask: It is used for customized format.
maxDate: It determines the maximum selectable date.
minDate: It determines the minimum selectable date.
onAccept: It is a callback function that gets triggered whenever the date gets accepted.
onClose: It is a callback function that gets triggered whenever the popup gets closed.
onError: It is a callback function that gets triggered whenever the input value entered is wrong.
onMonthChange: It is a callback function that gets triggered whenever the month is changed.
onOpen: It is a callback function that gets triggered whenever the popup requests to be opened.
onViewChange: It is a callback function that gets triggered whenever the view gets changed.
onYearChange: It is a callback function that gets triggered whenever the year is changed.
open: It is a boolean value. It determines whether to open the popup or not. It is false by default.
OpenPickerButtonProps: It determines props to pass to the keyboard adornment button.
openTo: It determines the first view to show.
orientation: It determines the display orientation.
readOnly: It is a boolean value. It determines whether to keep the picker read-only or not. It is false by default.
renderDay: A function to determine the days to render.
renderLoading: A function that returns the node to render.
rifmFormatter: A function to format the input string by passing through the Rifm component.
rightArrowButtonText: It defines the right arrow icon to be shown.
shouldDisableDate: It is a function to disable dates in the calendar.
shouldDisableMonth: It is a function to disable the selection of months in the calendar.
shouldDisableYear: It is a function to disable the selection of years in the calendar.
showDaysOutsideCurrentMonth: It is a boolean value. It determines whether to show the dates outside the current month or not. It is false by default.
showToolbar: It is a boolean value. It determines whether to show the toolbar in desktop mode or not. It is false by default.
ToolbarComponent: It determines the component that will replace the default toolbar renderer.
toolbarFormat: It refers to the date format.
toolbarPlaceholder: It refers to the placeholder value in the picker.
toolbarTitle: It determines the mobile picker title.
value: It refers to the value of the picker.
views: It takes an array of views to show.

Slots:

ActionBar: It refers to the bar placed below picker views.
LeftArrowButton: It denotes the button to switch to the left view.
LeftArrowIcon: It refers to the icon for the left view.
OpenPickerIcon: It refers to the icon displayed in the open picker button.
RightArrowButton: It denotes the button to switch to the right view.
RightArrowIcon: It refers to the icon for the right view.
SwitchViewButton: It refers to the button which enables one to switch between different views.
SwitchViewIcon: It refers to the icon displayed in the SwitchViewButton.

Syntax:

<MobileDatePicker />

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Project Structure: It will look like the following.

Example 1: We are passing the label, value, maxDate, views, and renderInput props to the MobileDatePicker component and wrapping it within the LocalizationProvider component. The LocalizationProvider is used to change the date-library locale that is used to render pickers. To the dateAdapter prop, we are passing AdapterDayjs.

App.js

Javascript

import React from 'react'
import { LocalizationProvider, MobileDatePicker }  
    from '@mui/x-date-pickers'; 
import { AdapterDateFns } from  
    '@mui/x-date-pickers/AdapterDateFns'; 
import { TextField } from '@mui/material'; 
  
export default function App() { 
  
    return ( 
        <div style={{ margin: "50px" }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
              
            <h4>React MUI MobileDatePicker API</h4> 
              
            <LocalizationProvider  
                dateAdapter={AdapterDateFns}> 
                <MobileDatePicker 
                    label="Select a date"
                    value={new Date()} 
                    renderInput= 
                    {(params) => <TextField{...params} />} 
                    views={['month', 'day']} 
                    maxDate={"02/21/2023"} 
                /> 
            </LocalizationProvider> 
        </div> 
    ); 
} 

Step to Run Application:

Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Example 2: In this example, we are creating a state using react hook useState naming date. We are adding a function named onYearChangeHandler that shows an alert message whenever there is a change in a year.

In the Component, MobileDatePicker we are adding, label, value, onChange function that changes the state, renderInput that shows TextArea, and orientation prop.

App.js

Javascript

import React, { useState } from 'react'
import { LocalizationProvider, MobileDatePicker } 
    from '@mui/x-date-pickers'; 
import { AdapterDateFns } from  
    '@mui/x-date-pickers/AdapterDateFns'; 
import { TextField } from '@mui/material'; 
  
export default function App() { 
    const [date, setDate] = useState(new Date()); 
    const onYearChangeHandler = () => { 
        alert("Year changed!") 
    } 
  
    return ( 
        <div style={{ margin: "50px" }}> 
            <h1 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h1> 
              
            <h4>React MUI MobileDatePicker API</h4> 
              
            <LocalizationProvider  
                dateAdapter={AdapterDateFns}> 
                <MobileDatePicker 
                    label="Select a date"
                    value={date} 
                    onChange={(date) => { 
                        setDate(date); 
                    }} 
                    renderInput= 
                    {(params) => <TextField{...params} />} 
                    onYearChange={onYearChangeHandler} 
                    orientation={'portrait'} 
                /> 
            </LocalizationProvider> 
        </div> 
    ); 
} 