Material UI datepicker opening in top left corner

user_11390535 0
Viewed 397

Im trying to open datepicker on button click its working but datepicker is opening on top left corner of page but if i use TextField it works fine

            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DatePicker
                clearable={true}
                open={isOpen}
                onClose={() => setIsOpen(false)}
                label='Basic example'
                value={currentDate}
                onChange={newValue => {
                  setCurrentDate(newValue)
                }}
                popperPlacement="bottom-end"
                renderInput={params => (
                  // <TextField
                  //   {...params}
                  //   onClick={() => setIsOpen(isOpen => !isOpen)}
                  // />
                  <Button variant='contained' onClick={() => setIsOpen(isOpen => !isOpen)}>
                    {dateString}
                  </Button>
                )}
              />
            </LocalizationProvider>
material-ui reactjs datepicker
1 Answers

you should use PopperProps please check https://mui.com/x/api/date-pickers/date-picker/

below code has been tested in MuiV5 and working fine.

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

const DateButton = () => {
  const [value, setValue] = React.useState(null);
  const [isOpen, setIsOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setIsOpen((isOpen) => !isOpen);
    setAnchorEl(event.currentTarget);
  };

  return (
    <Box sx={{ mt: 10, ml: 50 }}>
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <DatePicker
          clearable
          open={isOpen}
          onClose={() => setIsOpen(false)}
          label="Basic example"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          PopperProps={{
            placement: "bottom-end",
            anchorEl: anchorEl
          }}
          renderInput={(params) => (
            // <TextField
            //   {...params}
            //   onClick={() => setIsOpen(isOpen => !isOpen)}
            // />
            <Button variant="contained" onClick={handleClick}>
              test
            </Button>
          )}
        />
      </LocalizationProvider>
    </Box>
  );
};

export default DateButton;
user_176200660
Related