any event listener for clear button?

[SiThu34297]

**I want to know selectedDate changes when i click clear button**

[nadamai]

You can achieve this based on my comment here: https://github.com/OMikkel/tailwind-datepicker-react/issues/26#issuecomment-1657978337

Just detect whether the clicked element lays within the calendar container and is the clear button, e.g.:

(target.tagName.toLowerCase() === 'button' && target.innerHTML === CLEAR_BUTTON_TEXT)

[morou34]

here is a solution for anyone facing this issue

import Datepicker from "tailwind-datepicker-react";
import React, { useState, useEffect } from "react";

const MyDatePicker = ({ onChange, canSelectDate, contractDate, disabled }) => {
  const [show, setShow] = useState(false);

  const CLEAR_BUTTON_TEXT = "Effacer"; // Text for the clear button

  // Handle the change of the selected date
  const handleChange = (selectedDate) => {
    if (selectedDate === null) {
      onChange(null); // Clear the selected date if null
    } else if (!disabled) {
      onChange(selectedDate); // Update the selected date if not disabled
    }
  };

  // Handle close of datepicker popup
  const handleClose = (state) => {
    if (!disabled) {
      setShow(state); // Only toggle the popup if not disabled
    }
  };

  // Detect click events and check if the "Clear" button is clicked
  useEffect(() => {
    const handleClickOutside = (e) => {
      const target = e.target;

      // If clicking inside the datepicker, check if it’s the clear button
      if (
        target.tagName.toLowerCase() === "button" &&
        target.innerHTML === CLEAR_BUTTON_TEXT
      ) {
        console.log("Clear button clicked");
        handleChange(null); // Clear the date when the "Effacer" button is clicked
      }
    };

    // Add event listener for outside clicks
    window.addEventListener("click", handleClickOutside);

    // Cleanup event listener when component unmounts
    return () => {
      window.removeEventListener("click", handleClickOutside);
    };
  }, []);

  const options = {
    autoHide: true,
    todayBtn: true,
    clearBtn: true,
    todayBtnText: "Aujourd'hui",
    clearBtnText: CLEAR_BUTTON_TEXT, // Set the clear button text
    maxDate: new Date("2311-12-31"),
    minDate: new Date("1900-01-01"),
    theme: {
      background: "",
      todayBtn: "",
      clearBtn: "",
      icons: "",
      disabledText: "",
      text: "",
      input: "pl-10", // Adds padding-left for input
      inputIcon: "left-3",
      selected: "",
    },
    datepickerClassNames: "top-30",
    defaultDate: contractDate ? new Date(contractDate) : null,
    language: "fr",
    disabledDates: [],
    weekDays: ["Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"],
    inputNameProp: "date",
    inputIdProp: "date",
    inputPlaceholderProp:
      !contractDate && canSelectDate
        ? "Sélectionner une date"
        : "Date non disponible",
    inputDateFormatProp: {
      day: "numeric",
      month: "long",
      year: "numeric",
    },
    inputProps: {
      disabled: disabled, // Disable the input field based on the disabled prop
    },
    show: !disabled && show, // Only show the date picker if not disabled
  };

  return (
    <div>
      <Datepicker
        options={options}
        onChange={handleChange}
        show={show}
        setShow={handleClose}
      />
    </div>
  );
};

export default MyDatePicker;