CODEWITHSUNDEEP
javascriptreactjsnext.jsmaterial-uimui-x
alireza tafreshi
alireza tafreshi

Reputation: 44

How can I have two calendars in the `DatePicker` component of MUI?

the <DateRangePicker/> component from MUI, accept a props named calendars that accept number of calendars that showing inside component popup, like this:

like it that had "3" value as its calendars props:

enter image description here

but DatePicker component hasn't that and cant handle this.

i want two use DatePicker component, for single select and not range select, but with two calendar.

something like this just for example!: <DatePicker calendars={2} />

Upvotes: 2

Views: 1439

Answers (2)

Kilian
Kilian

Reputation: 1939

I achieved a similar effect as requested by using two date pickers and "controlling" the reference date which is responsible to define which month is initially displayed. As the reference date is not really a controllable value the key is updated to remount the component on change!.

While it looks and feels great please refer to https://github.com/mui/mui-x/issues/16108 for the github feature request to avoid the key hack which might have performance implications.

enter image description here

const [currentMonthLeft, setCurrentMonth] = React.useState(dayjs());

const referenceDateLeft = currentMonthLeft;
const referenceDateRight = currentMonthLeft.add(1, "month");

<ClickAwayListener onClickAway={() => setOpen(false)}>
  <Box>
    <Box mt={3} ml={3}>
      <TextField
        value={dayjs(fieldDepartureTime.value).format("ddd, MMM D")}
      />
    </Box>

    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack direction="row" sx={{ position: "relative" }}>
        <DateCalendar
          minDate={dayjs()}
          views={["day"]}
          referenceDate={referenceDateLeft}
          key={referenceDateLeft.toString()}
          slots={{
            nextIconButton: () => <></>,
            previousIconButton: () => <></>,
          }}
        />
        <DateCalendar
          minDate={dayjs()}
          views={["day"]}
          key={referenceDateRight.toString()}
          referenceDate={referenceDateRight}
          slots={{
            nextIconButton: () => <></>,
            previousIconButton: () => <></>,
          }}
        />
        <IconButton
          sx={{
            position: "absolute",
            left: "0px",
            top: "50%",
            transform: "translateX(-50%)",
            backgroundColor: "white",
            boxShadow: 2,

            ":hover": {
              backgroundColor: "#f7f8f8",
            },
          }}
          onClick={() => {
            setCurrentMonth((d) => {
              return d.subtract(1, "month");
            });
          }}
        >
          <NavigateBeforeIcon />
        </IconButton>

        <IconButton
          sx={{
            position: "absolute",
            right: "0px",
            top: "50%",
            transform: "translateX(50%)",
            boxShadow: 2,
            backgroundColor: "white",

            ":hover": {
              backgroundColor: "#f7f8f8",
            },
          }}
          onClick={() => {
            setCurrentMonth((d) => {
              return d.add(1, "month");
            });
          }}
        >
          <NavigateNextIcon />
        </IconButton>
      </Stack>
    </LocalizationProvider>
  </Box>
</ClickAwayListener>

Upvotes: 0

Yoctoboy
Yoctoboy

Reputation: 540

The DatePicker component is built to pick one, and one date only, hence why it will only ever contain one calendar.

If you want to select 2 dates, either use 2 distinct DatePickers, or use the DateRangePicker with calendars={2}.

Upvotes: 1

Related Questions