Question 188021 in Html Question posted in
Some basic documentation can be found here.

Html – How do I prevent my Datepicker from leaving the Dialog and breaking

I am creating a form within a dialog box, but when I use the date picker and attempt to select a date, it disappears and breaks, making the last days of the calendar inaccessible. You can see an example of this behavior in the image linked below:

enter image description here

The following code shows the dialog component where I make use of the Datepicker component:

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  aria-labelledby="form-dialog-title"
  sx={{}}
>
  <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
  <DialogContent>
    <Box
      noValidate
      component="form"
      onSubmit={(evt) => handleSubmit(evt, filterData)}
      sx={{
        display: 'grid',
        flexDirection: 'column',
        m: 'auto',
        width: 'fit-content',
      }}
    >
      <CustomDatePicker
        id="fechaHasta"
        value={fechaHasta}
        startDate={fechaDesde}
        label="END date"
        callback={outputInputChange}
      />
      <DialogActions>
        <Button onClick={() => setOpen(false)} color="primary">
          Cancel
        </Button>
        <Button
          onClick={() => setOpen(false)}
          color="primary"
          type="submit"
        >
          Filter
        </Button>
      </DialogActions>
    </Box>
  </DialogContent>
</Dialog>

I have tried several things to solve this problem in my component, including using offset modifiers to change the position, but nothing has worked so far. The following is the code for the Datepicker component:

<DatePicker
  id={id}
  name{={id}
  minDate={isEmpty(startDate) ? undefined : startDate}
  maxDate={isEmpty(endDate) ? undefined : endDate}
  label={label}
  variant="inline"
  inputVariant="outlined"
  format="dd/MM/yyyy"
  value={value}
  onChange={handleChange}
/>

I would appreciate any information you can offer regarding this issue. It should be noted that this only happens when my modal contains the form.

Tags:

2

Answers


  1. 0

    You can try adding a z-index to your date picker component. To ensure that it appears above the dialog box, assign a higher value to your z-index property.

    Login or Signup to reply.
  2. 0

    You Can Use memo hook To Resolve This issue

    import React from 'react';

const MemoizedDatePicker = React.memo(DatePicker);

const YourComponent = () => {
  // Your component code here
  
  return (
    <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby="form-dialog-title">
      <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
      <DialogContent>
        {/* Your other dialog content */}
        <MemoizedDatePicker
          id={id}
          name={id}
          minDate={isEmpty(startDate) ? undefined : startDate}
          maxDate={isEmpty(endDate) ? undefined : endDate}
          label={label}
          variant="inline"
          inputVariant="outlined"
          format="dd/MM/yyyy"
          value={value}
          onChange={handleChange}
        />
        {/* Your other dialog content */}
      </DialogContent>
      <DialogActions>
        {/* Your dialog actions */}
      </DialogActions>
    </Dialog>
  );
};

export default YourComponent;

    memo Will Only Render Those state which have been changed recently other wise it will memorize that compoent and stop re-rendring

    I just Gave You Example You Can Modify According To Need

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search