0

我正在使用“@material-ui/lab/ MobileDateRangePicker ”中的 MobileDateRangePicker。我正在尝试根据我的需要对其进行自定义。我正在寻找的是

当 MobileDateRangePicker 打开时，我需要首先显示文本输入视图，然后当我单击日历图标时需要显示日历视图。但现在完全相反的事情正在发生。我怎样才能得到我的要求。

这是完整的代码。任何帮助都会对我很有帮助。谢谢你。

import * as React from "react";
import TextField from "@material-ui/core/TextField";
import AdapterDateFns from "@material-ui/lab/AdapterDateFns";
import LocalizationProvider from "@material-ui/lab/LocalizationProvider";
import Box from "@material-ui/core/Box";
import Stack from "@material-ui/core/Stack";
import MobileDateRangePicker from "@material-ui/lab/MobileDateRangePicker";
import { Button } from "@material-ui/core";

 export default function ResponsiveDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  const [openPicker, setOPenPicker] = React.useState(false);

  const handleClick = () => {
    setOPenPicker(!openPicker);
  };

  return (
   <div>
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Stack spacing={3}>
        <MobileDateRangePicker
          startText="Start date"
          endText="End date"
          disableMaskedInput={true}
          // open={openPicker}
          // disableOpenPicker={true}
          showDaysOutsideCurrentMonth={true}
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          toolbarTitle="custom date range"
          renderInput={(startProps, endProps) => (
            <React.Fragment>
              <TextField {...startProps} />
              <Box sx={{ mx: 2 }}> to </Box>
              <TextField {...endProps} />
            </React.Fragment>
          )}
        />
      </Stack>
    </LocalizationProvider>
  </div>
  );
}

沙盒链接：https ://codesandbox.io/s/responsivedaterangepicker-material-demo-forked-8qws4?file=/demo.js

4

0 回答 0