Issue with MaterialUI and ReactJS: MobileDatePicker does not close after selecting a date

Question

Issue with MaterialUI and ReactJS: MobileDatePicker does not close after selecting a date

After implementing closeOnSelect for selecting a date, I am encountering an issue where the date picker remains open even after selection. The only way to make it disappear is by either escaping or clicking the OK or Cancel buttons. This issue occurs on both desktop and mobile devices.

<LocalizationProvider dateAdapter={AdapterDateFns}>
<MobileDatePicker
style={{ width: '100%' }}
label={"Date From"}
inputFormat="dd/MM/yyyy"
closeOnSelect={true}
views={['day']}
value={abc}
renderInput={(params) => <TextFields {...params} fullWidth />}
/>
</LocalizationProvider>

Is there a solution to ensure that the date picker closes automatically after a date is selected?

reactjs material-ui

Answer 1

Answer №1

To ensure the date picker does not close on selection, set the disableCloseOnSelect prop to false.

<LocalizationProvider dateAdapter={AdapterDateFns}>
   <MobileDatePicker
      style={{ width: '100%' }}
      label={"Date From"}
      inputFormat="dd/MM/yyyy"
      disableCloseOnSelect={false}
      views={['day']}
      value={abc}
      renderInput={(params) => <TextFields {...params} fullWidth />}
   />
</LocalizationProvider>

If you want to see a live example, check out this codesandbox https://codesandbox.io/s/date-picker-material-ui-forked-so0v14

Answer 2

To ensure the date picker does not close on selection, set the disableCloseOnSelect prop to false.

<LocalizationProvider dateAdapter={AdapterDateFns}>
   <MobileDatePicker
      style={{ width: '100%' }}
      label={"Date From"}
      inputFormat="dd/MM/yyyy"
      disableCloseOnSelect={false}
      views={['day']}
      value={abc}
      renderInput={(params) => <TextFields {...params} fullWidth />}
   />
</LocalizationProvider>

If you want to see a live example, check out this codesandbox https://codesandbox.io/s/date-picker-material-ui-forked-so0v14

Answer 3

Answer №2

I've implemented a small modification in your code. Hopefully, it will be beneficial to you:

Make sure to include the required props for your date picker, such as {onChange, value }
Remember that datePickers do not accept style as props in this context

import * as React from "react";
import TextField from "@mui/material/TextField";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";


export default function MaterialUIPickers() {
  const [value, setValue] = React.useState<Date | null>(
    new Date("2014-08-18T21:11:54")
  );

  const handleChange = (newValue: Date | null) => {
    setValue(newValue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDatePicker
        label={"Date From"}
        inputFormat="dd/MM/yyyy"
        value={value}
        views={["day"]}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} fullWidth />}
      />
    </LocalizationProvider>
  );
}

Answer 4

I've implemented a small modification in your code. Hopefully, it will be beneficial to you:

Make sure to include the required props for your date picker, such as {onChange, value }
Remember that datePickers do not accept style as props in this context

import * as React from "react";
import TextField from "@mui/material/TextField";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

import { MobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";


export default function MaterialUIPickers() {
  const [value, setValue] = React.useState<Date | null>(
    new Date("2014-08-18T21:11:54")
  );

  const handleChange = (newValue: Date | null) => {
    setValue(newValue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <MobileDatePicker
        label={"Date From"}
        inputFormat="dd/MM/yyyy"
        value={value}
        views={["day"]}
        onChange={handleChange}
        renderInput={(params) => <TextField {...params} fullWidth />}
      />
    </LocalizationProvider>
  );
}

Issue with MaterialUI and ReactJS: MobileDatePicker does not close after selecting a date

Answer №1

Answer №2

Similar questions

What is the most effective method to query Prisma using a slug without utilizing a React hook?

The base64 conversion for the image is overflowing from the upload image field in react-draft-wysiwyg

How can the required flag be integrated with rules validation in react-hook-form and material-ui (mui) for inputs?

Is there a way to customize the styles for the material UI alert component?

Utilize React.js ThemeProvider to dynamically change themes based on routing

Error arises on Github when submitting a pull request due to a conflicted package

Avoiding unlimited re-renders when using useEffect() in React - Tips and Strategies

Why is my React app opening in Google Chrome instead of the API?

Is it possible to use both material-ui@next and the previous version concurrently?

Material UI React Autocomplete Component

Upon attempting to add a new component, an error was encountered: Uncaught SyntaxError: Unexpected token export

ReactJS Application: Issue with Selective Mobile Scrolling

What could be the reason for the failure of .simulate("mouseover") in a Jest / Enzyme test?

React video recording not displaying in the video element

Encountering a TypeError in Material UI React Autocomplete

Is there a way to restrict my input to only 10 numbers without allowing any characters?

Add the file retrieved from Firestore to an array using JavaScript

React JS for loop not displaying any output

What is the best way to implement the Snackbar functionality within a class-based component?

The callbackFinished function is not defined in the winwheel library