index.jsx

import React, { useState } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
const CustomRangePicker = (props) => {
  const { onChange, showToday, defaultValue = [], format = 'YYYY-MM-DD' } = props;
  const [startDate, setStartDate] = useState(defaultValue[0] || null);
  const [endDate, setEndDate] = useState(defaultValue[1] || null);
  const onChangeStart = (date, dateString) => {
    setStartDate(dateString);
    onChange([dateString, endDate]);
  };
  const onChangeEnd = (date, dateString) => {
    setEndDate(dateString);
    onChange([startDate, dateString]);
  };
  const disableStart = (current) => {
    return current && endDate && current > moment(endDate);
  };
  const disableEnd = (current) => {
    return current && startDate && current < moment(startDate);
  };
  return (
    <div className="custom-rangePicker">
      <DatePicker
        onChange={onChangeStart}
        placeholder={'开始时间'}
        disabledDate={disableStart}
        showToday={showToday}
        className={'start-time'}
        value={startDate ? moment(startDate, format) : null}
      />
      <span className="time-symbol">~</span>
      <DatePicker
        onChange={onChangeEnd}
        placeholder={'结束时间'}
        disabledDate={disableEnd}
        showToday={showToday}
        className={'end-time'}
        value={endDate ? moment(endDate, format) : null}
      />
    </div>
  );
};
export default CustomRangePicker;

index.less

.custom-rangePicker {
    display: flex;
    margin-left: 50px;
    .start-time {
        border-right: none;
        border-radius: 2px 0 0 2px;
    }
    .time-symbol {
        display: flex;
        width: 20px;
        height: 32px;
        line-height: 30px;
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
    .end-time {
        border-left: none;
        border-radius: 0 2px 2px 0;
    }
    .ant-picker:hover, .ant-picker-focused {
        border-color: #d9d9d9;
        box-shadow: none;
        border-bottom-color: #40a9ff;
    }
}

其他组件引用

const Sub1 = () => {
  const change = (value) => {
    console.log(value);
  };
  return (
    <CustomRangePicker
      onChange={change}
      showToday={false}
      defaultValue={['2021-11-01', '2022-01-11']}
    />
  );
};

主要是解决：antd本来的时间筛选组件RangePicker，在选择一个时间的时候，另外一个时间只会显示当前时间前后的时间，如果是跨年的话就会出现体验不好的感觉，为了解决这个问题，就自己简单写了一个时间范围筛选