反应日期选择器过滤日期问题

Question

我似乎在限制周末方面遇到了问题，如示例所示。

我正在使用 class 组件并尝试从 docs:

中实现这个功能性示例

来自文档的示例：

() => {
  const [startDate, setStartDate] = useState(null);
  const isWeekday = date => {
    const day = getDay(date);
    return day !== 0 && day !== 6;
  };
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      filterDate={isWeekday}
      placeholderText="Select a weekday"
    />
  );
};

这是我的尝试： 我创建了 isWeekday 函数并将其传递给 DatePicker。

import React from 'react'
import DatePicker from 'react-datepicker'
import getDay from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

const isWeekday = (date) => {
  const day = getDay(date)
  return day !== 0 && day !== 6
}

export class Random extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      settlementDate: new Date(),
    }
  }

  render() {
    <DatePicker
      selected={this.state.settlementDate}
      onChange={(date) => this.setState({ settlementDate: date })}
      minDate={new Date()}
      filterDate={isWeekday}
    />
  }
}

但我收到以下错误：

TypeError: Cannot call a class as a function

如何制作一个限制周末的日期选择器？

Answer 1

您遇到错误：

TypeError: Cannot call a class as a function

因为您在从 react-datepicker 导入默认成员后将 class 作为函数调用:

不正确：

import getDay from 'react-datepicker' // You imported default class as `getDay`
const day = getDay(date) // You tried to call the class

注：getDay isn't supposed to come from react-datepicker. It is a standard JS Date的方法

正确：

import React, { Component } from 'react'
import DatePicker from 'react-datepicker'

class SelectWeekDay extends Component<any, any> {
  constructor(props) {
    super(props)
    this.state = {
      startDate: null,
    }
  }

  isWeekday = (date: Date) => {
    const day = date.getDay()
    return day !== 0 && day !== 6
  }

  render() {
    return (
      <>
        <DatePicker
          selected={this.state.startDate}
          onChange={(date) =>
            this.setState({
              startDate: date,
            })
          }
          filterDate={this.isWeekday}
        />
      </>
    )
  }
}

反应日期选择器过滤日期问题

React date picker filtering dates issue

javascript

reactjs

react-datepicker