如何防止用户在反应日期中选择高于结束日期的日期

Question

我想知道如何防止用户 select输入比今天早的日期。例如，今天是 3.7，所以将其设为用户可以 select.

的最晚结束日期

<DateRangePicker
    startDate={this.state.startDate} 
    startDateId="startDate" 
    endDate={this.state.endDate} 
    endDateId="endDate" 
    onDatesChange={({ startDate, endDate }) => {
      this.setState({ startDate, endDate }, () => {});
    }} 
    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
    onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
    daySize={50}
    noBorder={true}
    isOutsideRange={() => false}
/>

Answer 1

我在另一个反应日期选择器包上遇到了类似的问题。在阅读了您的文档（AirBnb 文档）之后，我发现他们的 GitHub 中提到了这个问题： Set date range #86

似乎有一个名为 isOutsideRange 的道具接受一个函数。例如，您可以 return false 为当前日期以外的任何日期进行比较。

希望对您有所帮助

Answer 2

您应该使用 isOutsideRange prop and Moment.js 来处理可用的日期范围。例如，您可以这样只允许选择过去 30 天内的日期：

CodeSandbox

import React, { Component } from "react";
import moment from "moment";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from "react-dates";
import { START_DATE, END_DATE } from "react-dates/constants";

export default class Dates extends Component {
  state = {
    startDate: null,
    endDate: null,
    focusedInput: null
  };

  onDatesChange = ({ startDate, endDate }) =>
    this.setState({ startDate, endDate });

  onFocusChange = focusedInput => this.setState({ focusedInput });

  isOutsideRange = day =>
    day.isAfter(moment()) || day.isBefore(moment().subtract(30, "days"));

  render() {
    const { startDate, endDate, focusedInput } = this.state;

    return (
      <DateRangePicker
        startDate={startDate}
        startDateId={START_DATE}
        endDate={endDate}
        endDateId={END_DATE}
        onDatesChange={this.onDatesChange}
        focusedInput={focusedInput}
        onFocusChange={this.onFocusChange}
        daySize={50}
        noBorder={true}
        isOutsideRange={this.isOutsideRange}
      />
    );
  }
}

Answer 3

不知道你有没有找到解决办法。但我还是给出了我的解决方案。

您可以使用 import { isInclusivelyBeforeDay } from react-dates 并使用 isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}

希望对您有所帮助

Answer 4

函数

isOutsideRange(day) {
    return (moment().diff(day) < 0);
  }

...

<DateRangePicker
isOutsideRange={this.isOutsideRange}
>

Answer 5

在最新的日期范围选择器版本中，我只使用了 maxDate={new Date()}。这对我来说很好。这不允许我比今天 select 更多。

如何防止用户在反应日期中选择高于结束日期的日期

How to prevent user from selecting date above end date in react-dates

javascript

reactjs

date-range

react-dates