reactjs 材料UI日期选取器在左上角打开

uinbv5nw 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(100)

我试图打开日期选择器按钮点击它的工作，但日期选择器是在页面左上角打开，但如果我使用文本字段，它的工作正常

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

reactjs

来源：https://stackoverflow.com/questions/72691395/material-ui-datepicker-opening-in-top-left-corner

2条答案

按热度按时间

snvhrwxg1#

你应该使用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;

赞(0）回复(0）举报 2023-01-30

ih99xse12#

可以在最外面的div上使用ref

renderInput={params => (
              // <TextField
              //   {...params}
              //   onClick={() => setIsOpen(isOpen => !isOpen)}
              // />
              <Button 
                ref={params.inputRef} //<<<add this line
                variant='contained' 
                onClick={() => setIsOpen(isOpen => !isOpen)}
               >
                {dateString}
              </Button>
            )}

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 材料UI日期选取器在左上角打开

2条答案

相关问题

热门标签

最新问答