Ant 设计/antd 日历在模态中不起作用

Question

I am trying to use antD's calendar picker inside of a modal that has been created using Material-UI. When I put the datepicker inside of the modal component. It shows me the selection box but when I click on it, nothing opens to choose from. I tried wrapping it in a div as well, but that didn't work. Here's an image of the modal:

Modal code:

import React, { useState,useEffect } from "react";
import { withStyles } from "@material-ui/core/styles";
// import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import MuiDialogContent from "@material-ui/core/DialogContent";
import MuiDialogActions from "@material-ui/core/DialogActions";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import { Link } from "@material-ui/core";
import Table from "../Cards/CardTable";
import moment from "moment";

import CardLineChart from "components/Cards/CardLineChart.js";
import CardLineChart2 from "components/Cards/CardLineChart2.js";
import CardStats from "components/Cards/CardStats.js";
import { DatePicker, Space } from "antd";


const { RangePicker } = DatePicker;

const styles = (theme) => ({
  root: {
    width: 300,
    margin: 0,
    padding: theme.spacing(2),
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500],
  },
});

const DialogTitle = withStyles(styles)((props) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

const DialogContent = withStyles((theme) => ({
  root: {
    // width: 200,
    padding: theme.spacing(2),
  },
}))(MuiDialogContent);

const DialogActions = withStyles((theme) => ({
  root: {
    margin: 0,
    padding: theme.spacing(1),
  },
}))(MuiDialogActions);

export default function CustomizedDialogs(props) {
  const { name } = props;
  console.log("Name is ======>", name)
  const [open, setOpen] = useState(false);
  const [colors, setColors] = useState(false);
  const [deviceMsgs,setDeviceMsgs] = useState(null)
  const [start, setStart] = useState();
  const [end, setEnd] = useState();


  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  

  const onChange = (dates, dateStrings) => {
    if (dateStrings.length > 0) {
      setStart(dateStrings[0]);
      setEnd(dateStrings[1]);
    }
  };

  const DPicker = () => {
    return (
      <div>
        <Space direction="vertical" size={12}>
          <RangePicker
            ranges={{
              Today: [moment(), moment()],
              "This Month": [
                moment().startOf("month"),
                moment().endOf("month"),
              ],
            }}
            onChange={onChange}
          />
        </Space>
      </div>
    );
  };



  return (
    <div>
      <Link variant="outlined" color="primary" onClick={handleClickOpen}>
        {name}
      </Link>
    
      <Dialog
        maxWidth={"xl"}
        // style={{ width: "100%" }}
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle
          style={{ backgroundColor: colors ? "green" : "red" }}
          id="customized-dialog-title"
          onClose={handleClose}
        >
          {name}
        </DialogTitle>
        <DialogContent dividers>
          <div>
          <DPicker />        //////// Using the picker
            <div className="relative w-full pr-4 max-w-full flex-grow flex-1">
              <span className="font-semibold text-xl text-blueGray-700">
                Last Update : 21 April 2021 17:00:00
              </span>
            </div>
            <div className="m-4 px-4 md:px-10 mx-auto w-full">
              <div>
                {/* Card stats */}
                <div className="flex flex-wrap">
                  <div className="w-full lg:w-6/12 xl:w-3/12 px-4">           
                    <CardStats
                      statSubtitle="Total"
                      statTitle="10"
                      statArrow="up"
                      statPercent="3.48"
                      statPercentColor="text-emerald-500"
                      statDescripiron="Since last month"
                      statIconName="fas fa-percent"
                      statIconColor="bg-lightBlue-500"
                    />
                  </div>
                  <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                    <CardStats
                      statSubtitle="ACTIVE"
                      statTitle="6"
                      statArrow="down"
                      statPercent="3.48"
                      statPercentColor="text-red-500"
                      statDescripiron="Since last week"
                      statIconName="fas fa-users"
                      statIconColor="bg-pink-500"
                    />
                  </div>
                  <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                    <CardStats
                      statSubtitle="INACTIVE"
                      statTitle="4"
                      statArrow="down"
                      statPercent="1.10"
                      statPercentColor="text-orange-500"
                      statDescripiron="Since yesterday"
                      statIconName="far fa-chart-bar"
                      statIconColor="bg-red-500"
                    />
                  </div>
                  <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                    <CardStats
                      statSubtitle="ALERT"
                      statTitle="--"
                      statArrow="up"
                      statPercent="12"
                      statPercentColor="text-emerald-500"
                      statDescripiron="Since last month"
                      statIconName="fas fa-chart-pie"
                      statIconColor="bg-orange-500"
                    />
                     
                  </div>        
                </div>
              </div>
            </div>
      </Dialog>
    </div>
  );
}

Answer 1

Obviously, you should check my solution because it is just my assumption of your problem, but anyway it seems that it can help you:

      <DatePicker
        getPopupContainer={(triggerNode) => {
          return triggerNode.parentNode;
        }}
      />

By default, popup container is located nearby body but you can change it to your modal element. The my solution above covers that

Answer 2

I found a solution to the problem and it is straightforward. after tinkering in the dev-tools, I found out that the Z-index of the antd Modal is set to 1055.

A simple override to the date-picker Z-index fixes the issue: I set it to 1056. Its className is: ".ant-picker-dropdown"

.ant-picker-dropdown{
    z-index: 1056;
}

solves the issue.

Answer 3

This will work.

Go to Node Module > antd > dist > antd.compact.css > change the z-index of elements accordingly.