Gowtham Manthena
Gowtham Manthena

Reputation: 279

How to customize the Material UI Date Range Picker

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

Answers (0)

Related Questions