admin管理员组

文章数量:1418087

I'm using

I seem to be having an issue in restricting weekends as shown in the example.

I'm using class ponent and trying to implement this functional example from the docs:

Example from 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"
    />
  );
};

Here is what I tried: I created the isWeekday function and passed it to the 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}
    />
  }
}

But I get the following error:

TypeError: Cannot call a class as a function

How can I make a datepicker with weekends restricted?

I'm using https://reactdatepicker.

I seem to be having an issue in restricting weekends as shown in the example.

I'm using class ponent and trying to implement this functional example from the docs:

Example from 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"
    />
  );
};

Here is what I tried: I created the isWeekday function and passed it to the 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}
    />
  }
}

But I get the following error:

TypeError: Cannot call a class as a function

How can I make a datepicker with weekends restricted?

  • javascript
  • reactjs
  • react-datepicker
Share Improve this question edited Jun 7, 2020 at 19:54 Ajeet Shah 19.9k9 gold badges64 silver badges104 bronze badges asked Jun 7, 2020 at 0:58 Jack.cJack.c 1,2552 gold badges12 silver badges14 bronze badges 4
  • Do you have more details on that traceback? I think something is missing here. – enapupe Commented Jun 7, 2020 at 1:02
  • can you post the full ponent code ? – adel Commented Jun 7, 2020 at 1:06
  • Cannot call a class as a function means that a function you are calling isn't actually a function. I would look at the stack trace and see what is trying to be called as a function. I have ran across this when I imported things incorrectly. – Special Character Commented Jun 7, 2020 at 1:22
  • I've updated the post above. Still an issue... – Jack.c Commented Jun 7, 2020 at 14:35
Add a ment  | 

2 Answers 2

Reset to default 3

You are getting error:

TypeError: Cannot call a class as a function

because you are calling class as a function after importing default member from react-datepicker:

Incorrect:

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

Note: getDay isn't supposed to e from react-datepicker. It is a standard JS Date's method.

Correct:

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

install date-fns.

Then try:

import getDay from "date-fns/getDay"

本文标签： javascriptReact date picker filtering dates issueStack Overflow

版权声明：本文标题：javascript - React date picker filtering dates issue - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745165196a2645637.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。