Как установить выбор диапазона дат в React JS DateRangePicker? - PullRequest
Новая
       66

Как установить выбор диапазона дат в React JS DateRangePicker?

0 голосов
/ 28 мая 2020

Я использую компонент DateRangePicker в моем приложении JS response. Я пытаюсь ограничить дату начала продолжительностью только 6 месяцев, а разница между датой начала и окончания не должна превышать 1 месяц. Я написал следующий код 

isOutsideRange = (day) => {
  if (day > moment()) return true;
  else if (this.state.startDate) {
    if (day > moment(this.state.endDate)) return true;
    if (day < moment().subtract(6, 'months')) return true;
    else return false;
  } else if (this.state.endDate) {
    if (day > moment(this.state.endDate)) return true;
    if ((moment(this.state.endDate) > (moment(this.state.startDate).subtract(1, 'month')))) return true;
    else return false;
  }
}

и вот код пользовательского интерфейса 

<DateRangePicker
  startDate={this.state.startDate}
  startDateId="validFromDate"
  endDate={this.state.endDate}
  endDateId="validToDate"
  onDatesChange={({ startDate, endDate }) =>
    this.handleValidDatesChange(startDate, endDate)
  }
  focusedInput={this.state.ofrFocusedInput}
  onFocusChange={(ofrFocusedInput) => this.setState({ ofrFocusedInput })}
  isOutsideRange={(e) => this.isOutsideRange(e)}
  showDefaultInputIcon={true}
  small={true}
  minimumNights={0}
  hideKeyboardShortcutsPanel={true}
  showClearDates={true}
  min={this.maxDate}
  shouldDisableDate={({ startDate }) => this.disablePrevDates(startDate)}
  // minDate={subDays(new Date(), 10)}
  displayFormat={() => "DD/MM/YYYY"}
/>;

Я пытался отладить, но он не работает. Может кто-нибудь подскажет решение?

Ответы [ 2 ]

1 голос
/ 29 мая 2020

Чтобы проверить, находится ли момент между двумя другими моментами, при необходимости глядя на шкалу единиц (минуты, часы, дни и т. Д. c), вы должны использовать: 

moment().isBetween(moment-like, moment-like, String, String);
// where moment-like is Moment|String|Number|Date|Array

Например, если вы необходимо проверить today - 6months <= someDate <= today, вы должны использовать что-то вроде: 

// returns TRUE if date is outside the range
const isOutsideRange = date => {
    const now = moment();
    return !moment(date)
             .isBetween(now.subtract(6, 'months'), now, undefined, '[]');
    // [] - match is inclusive
}

Для получения дополнительной информации, пожалуйста, отметьте Между документами . Этот метод очень гибкий, например, вы можете иметь исключающее или включающее совпадение.

Теперь второе условие. Если вы хотите проверить, endDate - startDate <= 1 month, вы также можете поиграть с моментами, чтобы достичь этого. 

// so if you add 1 month to your startDate and then your end date
// is still before the result or the same - you can say the duration
// between them is 1 month
const lessThanMonth = (startDate, endDate) => {
    return endDate.isSameOrBefore(moment(startDate).add(1, 'months'));
}
0 голосов
/ 28 мая 2020 
if (day.isAfter(moment()) || 
   !day.isAfter(moment().subtract(6,'months'))) return true;
...