antd日期选择框DatePicker时间选择跨度不超过一年且今天后日期置灰

1,172 阅读1分钟

最近公司很多项目都有关于日期的限制

用得最多的是禁止选择今天之后的日期

其次是选择的日期跨度为30天,365天等,

这里以时间跨度一年为例写一个Demo

<Form
  form={form}
  layout="inline"
  initialValues={default_Params}
  onValuesChange={onValuesChange}
>
   <Form.Item
     label="统计时间"
     name="time"
     rules={[{ required: true, message: '请选择日期' }]}
   >
     <RangePicker
       format="YYYY-MM-DD"
       placeholder={['START DATE', 'END DATE']}
       disabledDate={disabledDate}
       onCalendarChange={(val) => setDates(val)}
       onOpenChange={onOpenChange}
     />
   </Form.Item>
</Form>
 // 限制动态日期区间选择,时间跨度不超过一年且今天之后日期置灰
  const [dates, setDates] = useState(null);
  
  // 禁用
  const disabledDate = (current) => {
    if (dates) {
      const tooLate = dates[0] && current.diff(dates[0], 'days') > 365;
      const tooEarly = dates[1] && dates[1].diff(current, 'days') > 365;
      return (
        !!tooEarly || !!tooLate || (current && current > moment().endOf('day'))
      );
    }
    return current && current > moment().endOf('day');
  };
  
  // 弹出日历框时,清空之前选择的日期
  const onOpenChange = (open) => {
    if (open) {
      form.setFieldValue('time', [null, null]);
      setDates(null);
    }
  };
// 单独只要求今天之后日期置灰,无时间跨度要求
  const disableDate = (current) => {
    let result = false;
    if (current > moment().add(0, 'days')) {
      result = true;
    }
    return result;
  };