problem with zIndex

[shahabt24]

hello thank you for this beautiful package the problem is when i use more than one datepicker in a page, the calendar will goes under another datepicker input as attached image. i will be thankful if give me a solution

[shahabt24]

any idea or solution??

[alireza9382]

I also have this problem.Did you solve it?

[shahabt24]

not completely I added some classes to wrapperClassName and inputClassName

[vahidimani]

Just do this: .DatePicker{ z-index: unset!important; }

.DatePicker__calendarContainer{ z-index: 10!important; }

[lorenzocorallo]

Just do this: .DatePicker{ z-index: unset!important; }

.DatePicker__calendarContainer{ z-index: 10!important; }

You can load the library css before your stylesheet and do whitout !important Thanks @vahidimani for the snippet

[me82852578]

This is my solution, maybe not the best, but at least I have been running well in my project for a while . solution

[joeleduardo]

I did something like this and works, the only details is you need to use renderInput prop...

import { useState } from "react";
import InputDate from "../inputDate/inputDate";
import DatePicker from "react-modern-calendar-datepicker";
import styles from "./datePickerWrapper.module.scss";

import { formatDatePicker } from "../../utils/format";

const DatePickerWrapper = ({name, prompt}) => {
    const [depth, setDepth] = useState(false);
    const [value, setValue] = useState(null) ;

   //---------------> SET FOCUS AND BLUR METHODS TO UPDATE DEPTH STATE <---------------//
    const inputDate = ({ref}) => (<InputDate reference={ref} name={name} date={value ? formatDatePicker(value) : ""} prompt={prompt} onFocus={() => setDepth(true)} onBlur={() => setDepth(!depth)} />);

    return (
        <DatePicker
            value={value}
            onChange={setValue}
            renderInput={inputDate}
            calendarClassName={styles["date-picker_calendar"]}
            calendarTodayClassName={styles["date-picker_today"]}
            //---------------> HERE YOU CONTROLS THE DEPTH <---------------//
            wrapperClassName={[styles["date-picker"], depth ? styles["date-picker_depth"] : ""].join(" ")}
            colorPrimary="#FF4e4b"
            colorPrimeryLight="#FF8377"
            shouldHighlightWeekends
        />
    )
};

export default DatePickerWrapper;

[mohadese-zarrin]

Just do this: .DatePicker{ z-index: unset!important; }

.DatePicker__calendarContainer{ z-index: 10!important;} i did this and my problem was solved,Tnk :)