Reputation: 279
I am using MobileDateRangePicker from "@material-ui/lab/MobileDateRangePicker". I am trying to customize it according to my needs. What I am looking for is
When the MobileDateRangePicker opens I need text input view to show first and after that when I click on calendar icon calendar view needs to come. But right now complete opposite is happening. How can I get my requirement.
This is the complete code. Any assistance would be really helpful to me. Thank you.
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>
);
}
sandbox link: https://codesandbox.io/s/responsivedaterangepicker-material-demo-forked-8qws4?file=/demo.js
Upvotes: 0
Views: 2681