cannot show datepicker on nextJs

[alvinChristianto]

Hi, i want to implement hotel-datepicker inside react function (nextJs),. Its fresh instalation of nextJs. It already show the input tag, but when i click the input tag, nothing show. here is the screenshot of my code ` "use client"; import React, { useRef, useEffect } from "react";

import * as fecha from "fecha"; import HotelDatepicker from "hotel-datepicker"; import "hotel-datepicker/dist/css/hotel-datepicker.css";

function dateHotel() { const inputRef = useRef(null);

const handleDatepickerInit = () => { if (inputRef.current) { var datepicker = new HotelDatepicker(inputRef.current); } };

useEffect(() => { handleDatepickerInit(); console.log("here"); }, []); // Run only once on component mount

return (

  <section className="">
    <div>
      <input ref={inputRef} type="text" id="input-id" />
    </div>
  </section>

); }

export default dateHotel; `

this code only show the input tag and when I click it, nothing show

ps : I already install hotel-datepicker and fetca

[benitolopez]

Hello, modify the code to:

"use client";
import React, { useRef, useEffect } from "react";

import * as fecha from "fecha";
import HotelDatepicker from "hotel-datepicker";
import "hotel-datepicker/dist/css/hotel-datepicker.css";

function DatepickerComponent() {
  const inputRef = useRef(null);
  let datepicker = null;

  const handleDatepickerInit = () => {
    if (inputRef.current) {
      datepicker = new HotelDatepicker(inputRef.current);
    }
  };

  useEffect(() => {
    handleDatepickerInit();
    return () => {
      if (datepicker) {
        datepicker.destroy();
      }
    };
  }, []); // Run only once on component mount

  return (
    <section className="">
      <div>
        <input ref={inputRef} type="text" id="input-id" />
      </div>
    </section>
  );
}

export default DatepickerComponent;

[alvinChristianto]

I did it, and yes its show the calendar event. but how to get Value of date. I assume it access getValue(), but dont know where to place it

[alvinChristianto]

i did this, and it works pretty good to get date check in, date check out and nights , Thanks @benitolopez

"use client";
import React, { useRef, useEffect, useState } from "react";

import * as fecha from "fecha";
import HotelDatepicker from "hotel-datepicker";
import "hotel-datepicker/dist/css/hotel-datepicker.css";

function DatepickerComponent() {
  const inputRef = useRef(null);
  let datepicker = null;
  const [inDate, setInDate] = useState("");
  const [outDate, setOutDate] = useState("");
  const [nights, setNights] = useState(0);

  const handleDatepickerInit = () => {
    if (inputRef.current) {
      datepicker = new HotelDatepicker(inputRef.current);
    }
  };

  useEffect(() => {
    handleDatepickerInit();
    return () => {
      if (datepicker) { 
        datepicker.destroy();
      }
    };
  }, []); // Run only once on component mount

  useEffect(() => {
    if (inputRef.current) {
      const handleAfterClose = () => {
        const fullValue = datepicker.getValue();

        const dt = fullValue.split(" - ")
        setInDate(dt[0])
        setOutDate(dt[1])

        setNights(datepicker.getNights())

      };

      inputRef.current.addEventListener("afterClose", handleAfterClose);

    }
  }, [inputRef]);

  return (
    <section className="">
      <div>
        <input ref={inputRef} type="text" id="input-id" className="text-slate-900 p-3 rounded-md"/>
      </div>
    </section>
  );
}

export default DatepickerComponent;