Javascript 反应日期选择器筛选日期问题

我正在使用

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

我正在使用类组件，并试图从以下方面实现这个功能性的示例：

文档示例：

() => {
  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"
    />
  );
};

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

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

但我得到了以下错误：

---

TypeError:无法将类作为函数调用

如何在周末受到限制的情况下创建日期选择器？

您遇到错误：

---

TypeError:无法将类作为函数调用

因为在从

react datepicker

导入默认成员后，将类作为函数调用：

不正确：

() => {
  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"
    />
  );
};

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

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 datepicker

。这是标准的JS方法

正确：

() => {
  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"
    />
  );
};

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

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

import React，{Component}来自“React”
从“react DatePicker”导入日期选择器
类SelectWeekDay扩展组件{
建造师（道具）{
超级（道具）
此.state={
startDate:null，
}
}
isWeekday=（日期：date）=>{
const day=date.getDay（）
返回日期！==0&&day！==6
}
render（）{
返回(
这是我的国家({
开始日期：，
})
}
filterDate={this.isWeekday}
/>
)
}
}

您有关于回溯的更多详细信息吗？我认为这里缺少一些东西。你能发布完整的组件代码吗？不能将类作为函数调用意味着你调用的函数实际上不是函数。我将查看堆栈跟踪，并查看试图作为函数调用的内容。我在错误导入东西时遇到了这个问题。我已经更新了上面的帖子。仍然是一个问题…我收到了

（日期：date）

@FiddleFreak的语法错误。你能发布完整的错误消息吗？

类型批注只能在TypeScript文件中使用。

。如果我把它改成只

（date）

，它似乎工作得很好。我认为您使用的是javascript而不是，所以

（date）

是实现相同目标的正确方法。啊，好吧，这个问题是针对javascript标记的，所以我假设是这样。