Question

我只需要在react-day-picker启用两天。其余的日子应该被禁用。谁能给我一个如何实现这个目标的例子？

我试过this example，但它不适合我。

export default function Example() {
  getDaysInMonth(month, year){
    // Since no month has fewer than 28 days
    let date = new Date(year, month, 1);
    const days = [];
    while (date.getMonth() === month) {
      dateys.push(new Date(date));
      date.setDate(date.getDate() + 1);
    }
    return days;
  }
  const disabledMonth = this.getDaysInMonth(12, 2017);
    return (
      <DayPicker
        initialMonth={new Date(2017, 3)}
        disabledDays={
          this.disabledMonth.filter(
            (date) => ![new Date(2017, 12, 3), new Date(2017, 12, 13)].includes(date)
          )
        }
      />
    );
}

我试图运行此代码我得到空数组

Answer 1

一个选项是，如果两天在同一个月内，您可以设置that the user should not be able to change the month。您可以使用initial month设置这个月。

然后，您可以设置disabled days，这是一个日期数组，即该月的日期，不包括两个可用日期。

示例：

如果您使用this之类的方法来获取一个月内的所有日期，您可以执行以下操作：

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default function Example() {
  const disabledMonth = getDaysInMonth(11, 2017);

  return (
    <DayPicker
      initialMonth={new Date(2017, 11)}
      disabledDays={
        this.disabledMonth.filter(
          (date) => ![new Date(2017, 11, 3).toString(), new Date(2017, 11, 13).toString()].includes(date.toString())
        )
      }
    />
  );
}

我在这里过滤了两个日期，即12月3日和13日，应该可以使用。

这是用es6

写的

如何在反应日选择器中启用两天

1 个答案: