react-tailwindcss-datepicker
react-tailwindcss-datepicker copied to clipboard
Pop up is displayed below another component despite a higher z Index container
Pop up is displayed below another component despite a higher z Index container.
This is a big problem during user forms. the date selection pop-up should be displayed above all other components for proper functioning.
Example :
`
<Label className={"font-bold self-center text-[--primary-color]"} text={"Formulaire de location"}/>
<div className={"absolute top-3 right-3 text-[--primary-color]"}>
<MdSell/>
</div>
<form onSubmit={handleSubmit(submitDealForm)}
className={"flex flex-col justify-between pt-5 space-y-5 h-full z-20"}>
<div className={"gap-10 flex-col flex"}>
<div className="flex flex-col space-y-1 ">
<Label size={LabelSize.Medium}
text={"Durée de la location"}/>
<Controller
name="dateRange"
control={control}
rules={{required: "Ce champs est requis"}} // Validation rule
render={({field}) => (
<Datepicker
{...field}
displayFormat={"DD/MM/YYYY"}
placeholder={"Selectionner une date"}
primaryColor={"blue"}
value={field.value}
onChange={(newValue) => {
field.onChange({
startDate: newValue?.startDate || null,
endDate: newValue?.endDate || null
});
void getDealResume({
startDate: newValue?.startDate || null,
endDate: newValue?.endDate || null
})
// TODO change dates in the url too
/*const newParams = new URLSearchParams(params.toString())
newParams.set("startDate", newValue?.startDate?.toString() || "")
newParams.set("endDate", newValue?.endDate?.toString() || "")
router.push(newParams.toString(), { scroll: true })*/
}}
containerClassName={"z-50"}
separator={"au"}
showShortcuts={true}
inputClassName={`focus:border-[#004dad] outline-none border-2 disabled:cursor-not-allowed
relative transition-all duration-300 py-2 pl-4 pr-14 w-full border-gray-300
rounded-lg tracking-wide text-color-[#004dad]
font-light text-sm placeholder-gray-400 bg-white focus:ring z-50`
}
/>
)}
/>
{errors.dateRange && <span
className="text-red-500">{errors.dateRange?.message && <>{errors.dateRange.message}</>}</span>}
</div>
<div className={"flex flex-col justify-center items-center"}>
<Label className={"text-orange-600 font-bold"} size={LabelSize.Small}
text={`La location de ${item.name} vous coutera :`}/>
<p className="font-black text-gray-700 text-xs mt-2">
1000 €
</p>
</div>
</div>
<div className={"pt-5 self-end items-end flex justify-end"}>
<Button type={"submit"} label={"Confirmer la location"}/>
</div>
</form>
</div>)
`