0

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

introducir la descripción de la imagen aquí

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;

1 respuesta 1

0

encontre una respuesta finalmente. El componente DatePicker solo debe inicializarse cuando su padre se este mostrando. En mi caso, el calendario esta dentro de un modal, por lo que la forma correcta de renderizarlo es hacerlo una vez que el modal fue abierto. Solo tuve que agregar esto a mi codigo y funciono sin problemas (la variable isOpen es quien controla si el modal esta abierto o cerrado)

{isOpen && 
    <DayPickerRangeController
        ...
    />
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.