React DatePicker从按月搜索切换到今日日期时按钮异常禁用求助

问题描述 #

我在使用datepicker时遇到了异常问题：当我选择按月搜索并随意选中一个月份时，按钮可以正常点击；但当我切换选择今日日期时，按钮会被禁用。不过如果先选择其他日期再切回今日，按钮又可以恢复正常点击。

相关代码 #

DatePicker组件实现 #

<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).toDate()}
  maxDate={moment(endRange).toDate()}
  open={this.state.datePickerIsOpen}
  onClickOutside={()=>this.openOrCloseDatePicker(false, this.state.error)}
/>

搜索按钮实现 #

<button className={(validForm || !hasAnyContractSelected) ? "form-action-button mv-button primary disabled" : "form-action-button mv-button primary"} tabIndex={7} disabled={validForm || !hasAnyContractSelected} type="button" onClick={() => {this.onSubmit()}}>
  <span className="search-carat">{localize('static.content.search')}</span>
</button>

表单校验逻辑（validForm定义） #

let validForm = !(
  this.validate(this.formRequirements, this.props.form).length === 0
) || !this.props.criteria.enableOwnerSearchAvailability;

补充Toggle按钮相关代码 #

<div className="mv-toggle-inner" style={{ position: "relative" }} tabIndex={this.props.tabIndex} onKeyDown={this.toggleOnSpace}>
  <Toggle
    icons={false}
    name={this.props.name}
    id={this.props.name}
    checked={this.props.checked}
    onChange={this.props.onChange}
    tabIndex={-1}
  />

toggleOnSpace(event: React.KeyboardEvent<HTMLElement>) {
  if (event.keyCode == 32) {
    let newEvent = {
      target: {
        name: this.props.name,
        type: "checkbox",
        checked: !this.props.checked,
      },
    };
    this.props.onChange(newEvent);
    event.preventDefault();
  }
}

问题截图 #

• 按钮可正常点击状态：
• 按钮异常禁用状态：

该问题的核心是日期值的格式/时间维度不一致，导致表单校验触发了错误判定：

1. 直接选择今日时，DatePicker返回的日期默认是当日0点0分0秒，而你设置的minDate={moment(today).toDate()}如果today变量是取的当前实时时间（带时分秒），二者的时间戳不相等，部分日期校验规则会将这种情况判定为所选日期小于最小日期，属于非法值，导致validForm为true，按钮被禁用。
2. 初始状态下this.props.value可能为空，openToDate返回的默认值和直接选今日返回的值格式不匹配，handleInput回调没有正确将今日的值同步到表单存储的this.props.form字段中，校验不通过触发按钮禁用。当你先选择其他日期时，表单的日期字段已经被赋值为合法格式，再切换回今日时，值可以正常同步，校验通过按钮恢复可用。

1. 统一所有日期的时间维度：将所有用到的日期统一处理为当日的起始时间，避免时分秒差异导致的校验异常，修改DatePicker的minDate、maxDate、selected属性配置：

// 统一将日期处理为当日0点0分0秒
minDate={moment(today).startOf('day').toDate()}
maxDate={moment(endRange).endOf('day').toDate()}
selected={this.openToDate(this.props.value) ? moment(this.openToDate(this.props.value)).startOf('day').toDate() : null}

同时openToDate函数内部返回的日期也统一做startOf('day')处理。
2. 检查handleInput回调逻辑：确认选择今日时，回调能正确将格式化后的日期值同步到上层表单的对应字段中，避免出现值更新不及时或者格式不对的问题。
3. 排查validate方法的日期校验规则：确认规则允许所选日期等于minDate，没有额外的非法值判定逻辑。

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