随笔——时间跨度超过XXX的日期置灰不可选择（ant design-RangePicker）

**状态**
  const [validDateFlag, setValidDateFlag] = useImmer<boolean>(false);
  const [dates, setDates]: any = useState([]);
  const [hackValue, setHackValue]: any = useState();
  const [dateValue, setDateValue]: any = useState();
**方法**
  // 不可选的日期范围（时间跨度不能超过3年，超过3年的日期置灰不可选择）
  const handleDisabledDate = (current: any) => {
    if (!dates || dates.length === 0) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 1095; // 3年
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 1095;
    return tooEarly || tooLate;
  };
  const onDateOpenChange = (open: any) => {
    if (open) {
      setHackValue([]);
      setDates([]);
    } else {
      setHackValue(undefined);
    }
  };
 **组件**
           <Form.Item label="有效期">
            <RangePicker
              className={validDateFlag ? 'tip_rangepicker' : ''}
              showTime
              format={formatTime}
              value={hackValue || dateValue}
              disabledDate={handleDisabledDate}
              onCalendarChange={val => setDates(val)}
              onOpenChange={onDateOpenChange}
              onChange={val => {
                setDateValue(val);
                !val && setValidDateFlag(() => true);
                val && setValidDateFlag(() => false);
              }}
            />
          </Form.Item>
          {validDateFlag && <div className="tip_date">有效期不能为空</div>} 
 **样式**
   .ant-picker {
    &.tip_rangepicker {
      border-color: #ff4d4f !important;
      &.ant-picker-focused {
        box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
      }
    }
  }
  .tip_date {
    margin: -24px 0 2px 0;
    color: #ff4d4f;
  }          

样式部分：就是类似必须项的样式；
自定义这部分样式的原因：是因为如果在form.Item中添加name后，在其里面时，当值不能按照理想的方向改变时，遇到这种情况需要自己定义想要的样式，这次的这个设置不可选择日期等属性后发现没有按照想要的方向显示相应日期，就去掉name然后自己定义必填样式了。

有一个问题（待解决）是：上述
const [dates, setDates]: any = useState([]);
const [hackValue, setHackValue]: any = useState();
const [dateValue, setDateValue]: any = useState();
使用useImmer替换useState，方法中改变状态的方式也变为useImmer下改变状态的方式，但是在选择日期后没有日期显示是空的，所以就没有改变使用useImmer

标签：dates,const,val,XXX,RangePicker,ant,useState,&&,any
来源： https://blog.csdn.net/weixin_44268707/article/details/111286938