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,在选择一个时间的时候,另外一个时间只会显示当前时间前后的时间,如果是跨年的话就会出现体验不好的感觉,为了解决这个问题,就自己简单写了一个时间范围筛选
网友评论