如何禁用React DatePicker今日日期并设置默认选中次日

解决方案 #

你需要修改2处代码即可实现需求：

1. 调整openToDate方法的逻辑，无默认值或默认值为今日时，自动返回次日日期
2. 将日期选择器的最小可选日期设置为次日，即可自动禁用今日及更早的日期

修改后的完整代码

方法部分：

openToDate(val:any){
  console.log("val: ", val)
  // 无传入值/传入值为今日时，返回次日日期
  if(!val || moment(val).isSame(moment(), 'day')){
    return moment().add(1, 'days').toDate()
  }
  return moment(val).toDate();
}

组件属性部分：

<DatePicker
  customInput={
    <React.Fragment>
      <input
        tabIndex={this.props.tabIndex}
        className="exact-date-input"
        placeholder={this.props.placeholder}
        autoComplete="off"
        type="text"
        maxLength={10}
        id="date-input"
        aria-label={ariaLabel}
        value={this.state.inputValue}
        onKeyDown={this.onKeyDownDateType}
        onClick={()=>this.openOrCloseDatePicker(true, this.state.error)}
        onFocus={()=>this.openOrCloseDatePicker(true, this.state.error)}
        onBlur={()=>this.emptyIfError(this.state.error)}
      />
    </React.Fragment>
  }
  openToDate={this.openToDate(this.props.value)}
  tabIndex={-1}
  selected={this.openToDate(this.props.value)}
  customInputRef="dateInput"
  autoComplete="off"
  id={this.props.id}
  onChange={this.handleInput}
  required={this.props.required}
  {/* 仅修改此行：最小可选日期设为次日 */}
  minDate={moment(today).add(1, 'days').toDate()}
  maxDate={moment(endRange).toDate()}
  open={this.state.datePickerIsOpen}
  onClickOutside={()=>this.openOrCloseDatePicker(false, this.state.error)}
/>

如果你的today变量本身就是moment()生成的今日日期，上述代码可直接运行，修改后打开日期选择器会默认选中次日，同时今日日期会被置灰不可选。

内容的提问来源于stack exchange，提问作者Nhan Nguyen