Question

因此，我希望在提供某些日期作为onClick属性时，相关元素disabledDays处理程序将被禁用。在我看来，react-day-picker仅更改元素的css。这对我来说似乎很晦涩，因此我怀疑我的实现存在问题。

阅读https://react-day-picker.js.org/examples/disabled/似乎可以确认它仅使用CSS进行样式设置。如何在onDayClick中完成有条件地禁用特定日期？这似乎是不合适的解决方案。

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>
  );
};

Answer 1

根据react-day-picker文档，它不会禁用click事件。但是实际上，您可以使用指针事件来实现“禁用”行为：更多信息在这里：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

    }`;

Answer 2

您可以从disabled获取modifiers属性。

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

Answer 3

您可以检查npm库中是否有日期选择器。它非常易于使用，还提供了更改设计和主题的自由。

这里是link

只需安装

   npm i react-single-calendar

阅读文档，它非常易于使用。

react-day-picker disableDays点击仍然触发onDayClick

3 个答案: