Estoy tratando de hacer uso de la libreria react-dates
(https://github.com/react-dates/react-dates/), mas especificamente del DayPickerRangeController
(http://react-dates.github.io/react-dates/?path=/story/daypickerrangecontroller--default).
La cosa es que puedo ver el calendario con el inspector de google chrome, pero no lo estoy visualizando en la pantalla.
Entiendo que es un problema de CSS, pero aun eliminando esta linea: import 'react-dates/lib/css/_datepicker.css';
y agregando estilos (como indica aca https://github.com/react-dates/react-dates/#overriding-styles) la cosa no cambia.
Cuando elimino la linea import 'react-dates/lib/css/_datepicker.css';
veo cosas en pantalla, pero claramente el CSS esta roto y no se ve el calendario como yo quiero
Dejo el codigo de mi componente, espero que alguien ya haya pasado por esto y me pueda dar una mano. Desde ya muchas gracias.
// Node Modules
import 'react-dates/initialize';
import { DayPickerRangeController } from 'react-dates';
import moment from 'moment';
import 'react-dates/lib/css/_datepicker.css';
import {
useEffect, useRef, useState
} from "react";
// Hooks
import useSettings from "@/src/hooks/useSettings";
const Stays = () => {
const [isOpen, setIsOpen] = useState(false);
const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");
const [focusedInput, setFocusedInput] = useState('startDate');
const staysBoxRef = useRef();
const staysBtnRef = useRef();
const {
saveSettings,
} = useSettings();
const setDates = ({startDate, endDate}) => {
setStartDate(startDate)
setEndDate(endDate)
}
const handleClick = () => {
console.log("handle click")
setIsOpen(!isOpen);
}
const handleClickOutside = e => {
// Click outside means we did not click in the box or the button.
const clickOutside = isOpen && staysBoxRef && !staysBoxRef?.current?.contains(e.target)
&& staysBtnRef && !staysBtnRef?.current?.contains(e.target) ? true : false;
if (clickOutside) {
handleClick();
}
};
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
});
return (
<>
<button
className={isOpen ? `item stay open` : `item stay`}
ref={staysBtnRef}
onClick={() => handleClick()}
>
<span className="label">Stay</span>
<span className="input">Add dates</span>
</button>
<div
className={isOpen ? `stay-selector-container open` : `stay-selector-container`}
ref={staysBoxRef}
>
<div className="calendar">
<DayPickerRangeController
startDate={startDate} // momentPropTypes.momentObj or null,
endDate={endDate} // momentPropTypes.momentObj or null,
onDatesChange={({ startDate, endDate }) => setDates({ startDate, endDate })} // PropTypes.func.isRequired,
focusedInput={focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
onFocusChange={focusedInput => setFocusedInput({ focusedInput })} // PropTypes.func.isRequired,
initialVisibleMonth={() => moment().add(2, "M")} // PropTypes.func or null,
/>
</div>
</div>
</>
);
};
export default Stays;