如何在ReactJs中的React Date Picker中禁用当前日期(今天)?

时间:2017-12-26 09:25:38

标签: reactjs react-datepicker

我已尝试过从React Datepicker禁用当前日期的可能方法。

以下是我的代码。

<SingleDatePicker
  showDefaultInputIcon
  inputIconPosition={ICON_AFTER_POSITION}
  date={input.value}
  placeholder="Move Date"
  numberOfMonths={input.numberOfMonths ? input.numberOfMonths : 1}
  focused={meta.active}
  openDirection="up"
  onDateChange={value => {
    const val = value && value.format ? value.format() : value;
    input.onChange(val);
  }}
  onFocusChange={({ focused }) => {
    if (focused) {
      input.onFocus({ focused });
      return;
    }
    input.onBlur();
  }}
/>

如果有人禁用帮助我。

1 个答案:

答案 0 :(得分:0)

最后,我可以使用isOutsideRange道具和moment从日期选择器中禁用今天。

以下是我的更新代码。
我先创造了明天的日期。

const tomo = moment().add(1, 'day').endOf('day');

我仅使用isOutsideRange明天启用日期。

 <SingleDatePicker
  showDefaultInputIcon
  inputIconPosition={ICON_AFTER_POSITION}
  date={input.value}
  placeholder="Move Date"
  numberOfMonths={input.numberOfMonths ? input.numberOfMonths : 1}
  focused={meta.active}
  openDirection="up"
  isOutsideRange={day => !isInclusivelyAfterDay(day, tomo)}
  onDateChange={value => {
    const val = value && value.format ? value.format() : value;
    input.onChange(val);
  }}
  onFocusChange={({ focused }) => {
    if (focused) {
      input.onFocus({ focused });
      return;
    }
    input.onBlur();
  }}
/>