标签：dates const val XXX RangePicker ant useState && any

**状态**
  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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。