Material UI 日期选择器在左上角打开

Question

我试图在按钮上打开日期选择器，单击其工作，但日期选择器在页面左上角打开，但如果我使用 TextField 它工作正常

            <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>

Answer 1

你应该使用PopperProps请检查https://mui.com/x/api/date-pickers/date-picker/

下面的代码已经过测试MuiV5并且工作正常。

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;