Material UI 自动完成功能，其中的日期选择器不会弹出

Question

我正在尝试在 MUI 自动完成的纸张中安装一个日期时间选择器。尝试了mui datepicker并尝试强行打开 datepicker 但没有运气。本机似乎可以在一定程度上工作，但仍然需要连接日期选择单击以关闭弹出窗口。这是演示：

https://codesandbox.io/s/material-demo-forked-pmgzp

请指教

Answer 1

我试图DatePicker与autocomplete. 我用useAutoComplete做到了

import * as React from "react";
import { useAutocomplete } from "@mui/base/AutocompleteUnstyled";
import { DateRangePicker } from "mui-daterange-picker";
import { TextField } from "@mui/material";
import InputAdornment from "@mui/material/InputAdornment";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import moment, { Moment } from "moment";

export interface IDatePickerProps {
  name: string;
  startDateLabel: string;
  endDateLabel: string;
  value: [Moment, Moment];
  setFieldValue: (
    field: string,
    value: [Moment, Moment],
    shouldValidate?: boolean
  ) => void;
}

export default function UseAutocomplete({
  name = "datepicker",
  value = [moment(), moment().add(1, "months")],
  startDateLabel = "2022-10-1",
  endDateLabel = "2022-12-1",
  setFieldValue
}) {
  const { getRootProps, getInputLabelProps, getInputProps } = useAutocomplete({
    id: "use-autocomplete-demo",
    options: []
  });

  const [open, setOpen] = React.useState(false);

  const toggle = () => setOpen(!open);

  return (
    <div>
      <>
        <div {...getRootProps()}>
          <label {...getInputLabelProps()}>{name}</label>
          <TextField
            {...getInputProps()}
            name={name}
            placeholder={`${startDateLabel} - ${endDateLabel}`}
            onClick={toggle}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <CalendarMonthOutlinedIcon />
                </InputAdornment>
              )
            }}
            value={`${moment(value[0]).format("YYYY-MM-DD")} - ${moment(
              value[1]
            ).format("YYYY-MM-DD")}`}
          />
        </div>
        {
          <DateRangePicker
            open={open}
            toggle={toggle}
            onChange={(range) => {
              let selectedValues = [
                moment(range.startDate),
                moment(range.endDate)
              ];
              setFieldValue(selectedValues);
            }}
          />
        }
      </>
    </div>
  );
}

输出：