Search code examples
javascriptreactjsreact-day-picker

react-day-picker disabledDays clicks still trigger onDayClick


So I would expect that the relative elements onClick handler would be disabled when providing some dates as disabledDays prop. It seems to me that the react-day-picker only changes the css of the elements. That seems obscure to me, so I suspect there is something wrong with my implementation.

Reading https://react-day-picker.js.org/examples/disabled/ seems to confirm that it is only styled with CSS. How would I achieve conditional disabling specific dates, would it be done in the onDayClick? That seems like an inappropriate solution.

import React, { useState } from "react";
import "./styles.css";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";

export default () => {
  const [date, setDate] = useState(undefined);

  let disabledDays = [
    new Date("2020/09/12"),
    new Date("2020/09/13"),
    new Date("2020/09/16")
  ];

  const modifiers = {
    "specific-disabled": [...disabledDays]
  };

  disabledDays.push({ before: new Date() });

  const disabledStyle = `.DayPicker-Day--specific-disabled {
      color: white;
      background-color: #FFCCCB;
      cursor: default;
    }`;

  const onDayClick = (day, { selected }) => {
    let date = selected ? undefined : day;
    console.log(`clicked on ${date}`);
    setStartDate(date);
  };

  return (
    <div>
      <style>{disabledStyle}</style>
      <DayPicker
        modifiers={modifiers}
        showWeekNumbers
        selectedDays={date}
        onDayClick={onDayClick}
        disabledDays={disabledDays}
      />
    </div>
  );
};


Solution

  • As per react-day-picker documentation, it won't disabled the click event. But actually you can achieve the "disabled" behavior using pointer-events: none; More info is here: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

    const disabledStyle = `.DayPicker-Day--specific-disabled {
          color: white;
          background-color: #FFCCCB;
          cursor: default;
          pointer-events: none;//this will disable mouse event
    
        }`;