Как запретить пользователю выбирать дату выше даты окончания в датах реакции - PullRequest
Новая
       33

Как запретить пользователю выбирать дату выше даты окончания в датах реакции

1 голос
/ 03 июля 2019

Мне интересно, как я могу запретить пользователю выбирать даты выше сегодняшней. Например, сегодня 3,7, так что давайте выберем дату наивысшей конечной даты, которую может выбрать пользователь. 

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

Ответы [ 2 ]

1 голос
/ 04 июля 2019

Вы должны использовать isOutsideRange prop и 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}
      />
    );
  }
}
0 голосов
/ 03 июля 2019

У меня была похожая проблема в другом пакете выбора даты реакции.Немного почитав вашу документацию (AirBnb), я смог обнаружить, что эта проблема упоминается на их GitHub: Установить диапазон дат # 86

Похоже, что есть подпорканазывается isOutsideRange, который принимает функцию.Например, вы можете вернуть false для любой даты, выходящей за пределы текущей даты, только с помощью сравнения.

Надеюсь, это поможет

...